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本 书 以 “网 站 开发 基础 一 MySQL 开发 基础 ~PHP 开发 基础 一 网 站 开发 综合 实例 ”为 主线 ,全 面 、 翔 实 
地 介绍 了 使 用 Dreamweaver, MySQL 和 PHP 进行 动态 网 站 开发 的 具体 步 又 和 技巧 ,涵盖 了 使 用 PHP 进 
行动 态 网 站 开发 的 主要 内 容 。 

本 书 内 容 循序 渐进 .语言 简明 容易 人 门 ,动态 网 站 初学 者 可 以 通过 本 书 的 学 习 , 了 解 并 掌握 使 用 PHP 
动态 网 站 开发 技术 开发 实际 项 目 所 需要 使 用 到 的 基本 知识 。 

本 书 适合 于 网 页 制作 人 员 PHE 网 络 开发 人 员 和 广大 网 络 爱好 者 学 习 使 用 ,尤其 适合 PHP 动态 网 站 
开发 初学 者 ,便于 了 解 整个 动态 网 站 开发 全 过 程 及 所 用 的 基本 知识 和 技术 。 
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随 着 我 国 改革 开放 的 进一步 深化 ,高 等 教育 也 得 到 了 快速 发 展 ,各 地 高 校 紧 密 结合 地 
经 济 建设 发 展 需要 ,科学 运用 市 场 调 ee 
造 传统 学 科 专 业 的 投入 力度 ,通过 教育 改革 合理 调整 和 配置 了 教育 资源 ,优化 了 传统 学 科 专 
业 ,积极 为 地 方 经 济 建设 输送 人 才 ,为 我 国 经 济 社会 的 快速 健康 和 可 持续 发 展 以 及 高 等 教 
育 自身 的 改革 发 展 做 出 了 巨大 贡献 。 但 是 ,高 等 教育 质量 还 需要 进一步 提高 以 适应 经 济 社 
会 发 展 的 需要 ,不 少 高 校 的 专业 设置 和 结构 不 尽 合理 ,教师 队伍 整体 素质 蝇 待 提高 ,人 才 培 
养 模 式 .教学 内 容 和 方法 需要 进一步 转变 ,学 生 的 实践 能 力 和 创新 精神 亟待 加 强 。 

教育 部 一 直 十 分 重视 高 等 教育 质量 工作 。2007 年 1 月 ,教育 部 下 发 了 《关于 实施 高 等 
学 校本 科教 学 质量 与 教学 改革 工程 的 意见 ), 计 划 实 施 “ 高 等 学 校本 科教 学 质量 与 教学 改革 
工程 "(简称 “质量 工程 ”)， n 洁 构 调整 .课程 教材 建设 ,实践 教学 改革 、 教 学 团队 建设 
等 多 项 内 容 ,进一步 深化 高 等 学 校 教学 改革 ,提高 人 才 培 养 的 能 力 和 水 平 , 更 好 地 满足 经 济 
社会 发 展 对 高 素质 人 才 的 需要 。 eee pe 
师资 力量 强 、 办 学 经 验 丰 富 、 教 学 资源 充裕 等 优势 ,对 其 特色 专业 及 特色 课程 ( 群 ) 加 以 规划 、 
整理 和 总 结 ,更 新 教学 内 容 、 改 革 课 程 体系 ,建设 了 一 大 批 内 容 新 、 体 系 新 、 方 法 新 、 手 段 新 的 
特色 课程 。 在 此 基础 上 ,经 教育 部 相关 教学 指导 委员 会 专家 的 指导 和 建议 ,清华 大 学 出 版 社 
在 多 个 领域 精 选 各 高 校 的 特色 课程 ,分 别 规划 出 版 系列 教材 ,以 配合 “质量 工程 ”的 实施 , 满 
足 各 高 校 教学 质量 和 教学 改革 的 需要 。 

为 了 深入 贯彻 落实 教育 部 (关于 加 强 高 等 学 校本 科教 学 工作 ,提高 教学 质量 的 若干 意 
见 ) 精 神 ,紧密 配合 教育 部 已 经 启动 的 “高 等 学 校 教学 质量 与 教学 改革 工程 精品 课程 建设 工 
作 ”, 在 有 关 专 家 、 教 授 的 倡议 和 有 关 部 门 的 大 力 支持 下 ,我 们 组 织 并 成 立 了 “清华 大 学 出 版 
社 教材 编审 委员 会 "(以 下 简称 * 编 委 会 ”) , 旨 在 配合 教育 部 制定 精品 课程 教材 的 出 版 规划 ， 
讨论 并 实施 精品 课程 教材 的 编写 与 出 版 工作 。“ 编 委 会 ”成员 皆 来 自 全 国 各 类 高 等 学 校 教学 
与 科研 第 一 线 的 骨干 教师 ,其 中 许多 教师 为 各 校 相关 院 、 系 主管 教学 的 院 长 或 系 主任 。 

按照 教育 部 的 要 求 ,“ 编 委 会 ”一致 认为 .精品 课程 的 建设 工作 从 开始 就 要 坚持 高 标准 、 
严 要 求 ,处 于 一 个 比较 高 的 起 点 上 。 精 品 课程 教材 应 该 能 够 反映 各 高 校 教 学 改革 与 课程 建 
设 的 需要 ,要 有 特色 风格 有 创新 性 (新 体系 、 新 内 容 、 新 手段 .新 思路 ,教材 的 内 容 体系 有 和 较 
高 的 科学 创新 ,技术 创新 和 理念 创新 的 含量 )、 先 进 性 (对 原 有 的 学 科 体系 有 实质 性 的 改革 和 
发 展 ,顺应 并 符合 21 世纪 教学 发 展 的 规律 ,代表 并 引领 课程 发 展 的 趋势 和 方向 ) ,示范 性 ( 教 
材 所 体现 的 课程 体系 具有 较 广泛 的 辐射 性 和 示范 性 ) 和 一 定 的 前 脆性 。 教材 由 个 人 申报 或 
各 校 推荐 (通过 所 在 高 校 的 “ 编 委 会 "成员 推荐 ) ,经 “ 编 委 会 ”认真 评审 ,最 后 由 清华 大 学 出 版 
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社 审 定 出 版 。 
目前 ,针对 计算 机 类 和 电子 信息 类 相关 专业 成 立 了 两 个 “ 编 委 会 ”, 即 “清华 大 学 出 版 社 
计算 机 教材 编审 委员 会 > 和 ”清华 大 学 出 版 社 电子 信息 教材 编审 委员 会 >。 推 出 的 特色 精品 


教材 包括 : 

(1) 21 世纪 高 等 学 校规 划 教材 。 计算 机 应 用 一 一 高 等 学 校 各 类 专业 ,特别 是 非 计算 机 
专业 的 计算 机 应 用 类 教材 。 

(2) 21 世纪 高 等 学 校规 划 教材 ， 计算 机 科学 与 技术 一 高 等 学 校 计算 机 相关 专业 的 
教材 。 


(3) 21 世纪 高 等 学 校规 划 教材 。 电子 信息 一 一 高 等 学 校 电子 信息 相关 专业 的 教材 。 
(4) 21 世纪 高 等 学 校规 划 教 材 ， 软件 工程 一 一 高 等 学 校 软件 工程 相关 专业 的 教材 。 
(5) 21 世纪 高 等 学 校规 划 教材 。 信息 管理 与 信息 系统 。 

(6) 21 世纪 高 等 学 校规 划 教材 。 财经 管理 与 应 用 。 

(7) 21 世纪 高 等 学 校规 划 教材 .电子 商务 。 

(8) 21 世纪 高 等 学 校规 划 教材 。 物 联 网 。 


清华 大 学 出 版 社 经 过 三 十 多 年 的 努力 ,在 教材 尤其 是 计算 机 和 电子 信息 类 专业 教材 出 
版 方面 树立 了 权威 品牌 ,为 我 国 的 高 等 教育 事业 做 出 了 重要 贡献 。 清 华 版 教材 形成 了 技术 
准确 、 内 容 严谨 的 独特 风格 ,这 种 风格 将 延续 并 反映 在 特色 精品 教材 的 建设 中 。 


清华 大 学 出 版 社 教材 编审 委员 会 
KRA: 魏 江 江 


E-mail: weijj@ tup. tsinghua. edu, cn 





PHP 是 一 个 操作 简单 、 功 能 强大 的 动态 网 站 开发 语言 ,用 PHP 开发 的 网 站 ,开发 过 程 
简单 ,用 户 维护 方便 。 由 于 具有 很 好 的 安全 性 、 跨 平台 性 及 开源 性 ,PHP 自 出 现 以 来 ,得 到 
了 广泛 的 应 用 和 迅速 的 发 展 。 在 国内 ,PHP 的 发 展 也 非常 迅速 ,百度 、 新 浪 \、 搜 狐 等 各 大 互 
联网 门户 都 在 广泛 使 用 PHP, 越 来 越 多 的 小 门户 网 站 也 加 入 使 用 PHP 的 行列 。 根 据 调查 ， 
PHP 从 业者 选择 PHP 的 因素 主要 是 “语言 简单 容易 上 手 ”"“ 可 获得 大 量 开源 代码 ”和 “PHP 
免费 ”三 个 方面 ,今后 的 发 展 潜力 巨大 ,更 多 的 年 轻 人 对 PHP 产生 了 浓厚 的 兴趣 。 

学 习 PHP 动态 网 站 开发 技术 ,前 提 必 备 基础 知识 包括 静态 网 站 制作 基础 (HTML 基础 
知识 .Dreamweaver 使 用 方法 等 )、 数 据 库 技术 。 通 过 多 年 的 教学 实践 ,分 析 学 生 在 学 习 过 
程 中 普遍 存在 的 问题 ,作者 认为 对 PHP. 动态 网 站 开发 有 浓厚 兴趣 的 学 习 者 ,选择 通俗 易 懂 
且 容易 入 门 的 教材 ,有 助 于 学 生 了 解 并 掌握 整个 动态 网 站 开发 全 过 程 及 所 用 的 基本 知识 和 
技术 。 鉴 于 此 ,通过 整合 HTML 基础 知识 Dreamweaver 的 使 用 .MySQL 数据 库 及 PHP. 
动态 网 站 知识 等 内 容 , 使 得 动态 网 站 初学 者 可 以 快速 地 了 解 并 掌握 使 用 PHP 动态 网 站 开 
发 技术 开发 实际 项 目的 基本 技能 。 

全 书 共 12 章 , 第 1 章 网 页 制作 基础 知识 ,主要 介绍 网 页 与 网 站 的 基本 概念 ,计算 机 网 络 
的 相关 概念 以 及 网 页 制作 相关 技术 。 第 2 章 介绍 HTML 基础 知识 。 第 3 一 5 章 为 
Dreamweaver CS6 的 使 用 : 第 3 章 介绍 Dreamweaver CS6 基本 操作 ,包括 如 何 创 建站 点 、 制 
作 简 单 网 页 .创建 链接 、 表 单 的 使 用 ; 第 4 章 介 绍 了 CSS 样式 和 网 页 布局 规划 ,主要 介绍 在 
Dreamweaver 中 如 何 使 用 CSS 样式 ,利用 表格 、 框 架 以 及 CSS 对 网 站 页 面 进行 布局 ; 第 5 
章 为 Dreamweaver 的 高 级 应 用 ,介绍 了 如 何在 页 面 中 添加 行为 .菜单 栏 、 折 秋 式 面板 以 及 
JavaScript 简单 应 用 等 。 第 6 一 8 章 为 数据 库 基础 : 第 6 章 介 绍 数据 库 的 基本 概念 、 数 据 模 
型 .关系 模型 等 数据 库 基础 知识 ; 第 7 章 主要 介绍 MySQL 服务 器 的 安装 .配置 及 使 用 ; 第 
8 章 详细 介绍 MySQL 数据 库 的 基本 操作 ,包括 使 用 SQL 语句 与 客户 端 界面 工具 如 何 定义 
数据 库 、 表 ,修改 表 、 表 中 数据 增删 改 查 操作 以 及 MySQL 数据 库 的 备份 与 恢复 。 第 9 一 12 
章 为 PHP 技术 内 容 : 第 9 章 介 绍 PHP 基本 知识 ,包括 基本 语法 ,数据 类 型 .运算 符 与 表达 
式 \ 流 程控 制 以 及 函数 等 ; 第 10 章 介绍 了 PHP 处 理 表单 数据 ; 第 11 章 介 绍 了 PHP 操作 数 
据 库 ,包括 连接 数据 库 、 创 建 数据 库 、 建 立 表 、 表 中 增删 改选 取 数据 等 ; 第 12 章 为 PHP 动态 
网 站 开发 实例 ,主要 以 网 上 商城 管理 系统 为 例 , 介 绍 了 数据 库 表 结构 的 设计 以 及 PHP 实现 
核心 代码 。 本 书 围绕 PHP 动态 网 站 开发 所 需要 掌握 的 基础 知识 循序 渐进 展开 ,通过 这 种 
安排 ,力图 使 学 生 掌握 使 用 PHP 技术 进行 动态 网 站 开发 的 基本 技术 方法 。 

本 书 语言 简明 内 容 丰 富 、 容 易 和 人 门 , 动 态 网 站 初学 者 可 以 通过 本 书 的 学 习 , 了 解 并 掌握 
使 用 PHP 动态 网 站 开发 技术 开发 实际 项 目 所 需要 使 用 的 基本 知识 ,有 静态 网 页 基础 知识 
的 学 习 者 可 选择 MySQL 数据 库 .PHP 动态 网 站 开发 、 综 合 案例 等 部 分 内 容 进行 学 习 。 选 
用 该 教材 的 教师 可 以 参考 已 修 课 程 ,选择 其 中 的 内 容 进 行 教学 。 
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本 书 第 2 章 由 杨 秋 翔 编写 ,第 5 一 8 章 由 董 晓 丽 编写 ,第 1 章 和 第 9— 12 WEITE SEATS. 
第 3.4 章 由 页 志 燕 编写 ,全 书 由 董 晓 丽 最 后 统 稿 。 

本 书 的 编写 参考 了 大 量 的 相关 书籍 和 资料 ( 详 见 参考 文献 ) ,在 此 向 这 些 参考 文献 和 书 
籍 的 作者 表示 感谢 。 

本 书 在 编写 过 程 中 得 到 了 中 北大 学 软件 学 院 、 计 算 机 与 控制 工程 学 院 领 导 以 及 同事 的 
大 力 帮 助 和 热情 支持 ,在 此 向 他 们 一 并 表示 感谢 。 

由 于 编者 水 平 有 限 , 书 中 难免 存在 朴 漏 之 处 ,欢迎 广大 读者 和 同行 专家 ,尤其 是 使 用 本 
节 的 教师 和 学 生 批评 指正 。 
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网 页 制作 基础 知识 | 


本 章 要 点 : 

。 网 页 与 网 站 基本 概念 ; 
。 计算 机 网 络 相 关 概 念 ; 
。 网 页 相关 技术 ; 

。 网 站 分 类 与 网 站 托管 。 


随 着 通信 技术 及 互联 网 技术 的 迅猛 发 展 ,网 络 应 用 已 成 为 人 们 工作 、 学 习 、 生 活 不 可 缺 
少 的 一 部 分 , 越 来 越 多 的 政府 部 门 、 企 事业 单位 .学校 以 及 个 人 通过 建立 网 站 发 布 信息 ,信息 
的 传递 主要 依靠 计算 机 网 络 ,在 学 习 如 何 制 作 网 页 之 前 ,首先 需要 了 解 一 些 网 页 与 网 站 基本 

概念 .计算 机 网 络 的 相关 概念 。 


(1.1 网 页 与 网 站 基本 概念 
P 


计算 机 网 络 是 现代 社会 传播 信息 的 重要 途径 ,而 网 页 与 网 站 承载 着 各 种 各 样 的 信 
息 , 是 人 类 传递 消息 在 计算 机 网 络 中 最 广泛 的 应 用 。 可 以 说 ,在 网 上 冲浪 已 经 成 为 人 类 
一 种 最 普遍 娱乐 活动 的 今天 ,网 页 对 人 们 来 说 不 再 是 一 个 陌生 的 概念 ,网 页 已 经 成 为 人 
们 与 外 界 沟通 的 重要 桥梁 ,在 信息 化 生活 中 ,人 们 无 时 无 刻 不 在 浏览 网 页 ,关注 对 自己 有 
用 的 信息 。 


1.1.1 网 页 基本 概念 


网 页 (Web Page) ,从 字面 上 理解 是 在 网 络 上 传输 的 一 个 页 面 ,这 个 页 面包 含 大 量 信 息 。 
在 多 媒体 信息 化 时 代 , 网 页 用 来 传送 消息 的 方式 不 再 局 限于 文本 和 图 片 ,还 可 以 用 动画 、 声 
音 .视频 等 多 种 方式 图 文 并 茂 地 描述 信息 ,使 人 们 身 临 其 境地 感受 信息 。 
网 页 是 存储 在 Web 服务 器 上 ,通过 Web 进行 传输 ,并 被 浏览 器 所 解析 和 显示 的 文档 类 
型 。 网 页 是 Internet 上 的 信息 携带 者 ,是 Internet 中 最 基本 的 信息 单位 ,是 把 各 种 多 媒体 信 
息 相 互 链接 起 来 而 构成 的 一 种 信息 表达 方式 。 与 人 们 生活 密切 相关 的 如 图 1. 1 所 示 的 购物 
网 页 ,与 在 校 学 生 相关 的 如 图 1. 2 所 示 的 学 校 网 页 
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图 1.1 购物 网 页 示例 
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1.2 学 校 网 页 示例 


1.1.2 网 站 基本 概念 


通过 超 链接 连接 起 来 的 一 系列 逻辑 上 可 以 视 为 一 个 整体 的 若干 网 页 就 叫做 网 站 (Web 
Site) ,也 就 是 同一 类 信息 内 容 的 集合 。 简 单 地 说 ,网 站 是 若干 网 页 的 集合 ,人 们 可 以 通过 网 
站 来 发 布 自己 想 要 公开 的 资讯 ， 或 者 利用 网 站 来 提供 相关 的 网 络 服务 ， 如 图 1. 3 所 示 的 学 校 
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网 站 。 人 们 可 以 在 购物 网 站 上 买 东西 ,可 以 在 求职 网 站 上 找 工作 ,可 以 在 新 闻 网 站 上 看 咨 
询 , 可 以 在 个 人 网 站 中 表达 自己 的 观点 。 
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图 1.3 学 校 网 站 示例 


网 站 是 表达 相关 信息 内 容 网 页 的 集合 。 所 以 网 站 中 的 信息 内 容 是 由 一 个 个 相互 链接 的 
网 页 ,通过 网 络 传送 到 读者 眼前 。 而 网 页 的 传送 会 涉及 一 些 计算 机 网 络 规则 与 概念 ,例如 因 
特 网 ,HTTP IP Jb di, 3X 44, HTML 等 相关 概念 ,也 会 用 到 一 些 相 关 的 工具 软件 ,例如 
Dreamweaver 软件 。 所 以 学 习 网 页 与 网 站 制作 之 前 ,需要 理解 与 网 页 有 关 的 一 些 计 算 机 网 
络 相 关 概 念 ,对 制作 网 页 会 有 一 定 的 帮助 。 图 1. 4 所 示 是 一 个 动态 网 站 的 示例 。 
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(1.2 计算 机 网 络 相关 概念 
P 


1.2.1 Internet 基本 概念 


计算 机 网 络 是 多 台 计 算 机 通过 特定 的 连接 方式 构成 的 一 个 计算 机 的 集合 体 , 是 
Internet 的 基础 。 

Internet 是 最 著名 的 广域网 ,是 全 世界 的 计算 机 相互 连接 而 形成 一 个 整个 地 球 规模 的 
计算 机 网 络 ,该 网 络 能 够 将 全 世界 的 计算 机 连接 在 一 起 ,是 因为 全 世界 都 遵循 一 个 通信 协 
议 一 一 TCP/IP 协议 ,这 样 ,在 Internet 中 的 任意 一 台 计 算 机 都 可 以 从 Internet 上 的 其 他 计 
算 机 中 来 获得 信息 。 

Internet 起 源 于 1969 年 ,是 由 美国 国防 部 设立 的 名 为 ARPAnet 的 军用 网 络 。1982 
年 ,美国 军 方 从 ARPAnet 撤 出 ,主要 用 于 学 术 机 构 的 连接 ,科学 家 可 以 用 它 来 分 享 数据 。 
今天 的 Internet, 已 成 为 千 万 计 用 户 使 用 的 全 球 性 网 络 ,没有 人 或 机 构 拥有 或 全 面 控制 它 。 

从 国内 Internet 的 发 展现 状 来 看 ,1994 年 4 月 ,中 国 科 学 院 计算 机 网 络 信息 中 心 正式 
TE A Internet, 从 此 ,中 国 Internet 发 生 了 飞速 的 发 展 。 从 域名 、 网 站 数 、IP 地 址 等 增长 情况 
来 看 ,我 国 互联 网 资源 得 到 了 全 面 提升 。 


1.2.2 Internet 基本 服务 功能 


Internet 的 基本 服务 功能 有 很 多 种 ,常见 的 是 WWW 服务 、 电 子 邮件 (E-mail) 服 务 、 文 
件 传输 服务 (File Transfer Protocol, FTP) 、 远 程 登 录 服 务 (Telnet) 等 。 


1. WWW 服务 


WWW(World Wide Web, 万 维 网 ) 是 一 个 基于 超级 文本 的 信息 查询 工具 。WWW 是 在 
Internet 的 基础 上 ,由 各 计算 机 节点 上 的 WWW 软件 和 超级 文本 格式 的 信息 文件 组 成 的 。 
这 些 节点 称 为 WWW 服务 器 ,简称 Web 服务 器 ,也 就 是 网 站 。 海 量 的 信息 被 存储 于 每 一 个 
Web 服务 器 上 ,也 就 是 网 页 的 集合 ,用 户 使 用 WWW 时 只 需 提出 查询 要 求 , 到 何 处 查询 及 
如 何 查 询 则 由 WWW 自动 完成 。 

WWW 服务 是 Internet 提供 的 最 主要 的 服务 ,通常 上 网 通过 浏览 器 访问 到 的 网 页 就 是 
万 维 网 的 内 容 。WWW 服务 工作 方式 如 图 1.5 所 示 。 





WwW 服务 器 ae 
图 1.5 WWW 服务 工作 方式 


WWW 服务 由 三 部 分 组 成 . 即 : 客户 机 、 服 务 器 和 HTTP 协议 。 
WWW 工作 过 程 如 下 。 
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COD 客户 机 运行 WWW 程序 ,一 般 是 浏览 器 ,连接 在 Internet. 上 的 某 个 服务 器 ,提出 
请 求 。 
(2) 服务 器 响应 ,发 送 超 媒 体 文件 ,一 般 是 由 HTML 编写 的 网 页 内 容 。 

(3) 客户 机 收 到 信息 ,通过 浏览 器 解释 执行 HTML 将 网 页 内 容 显示 在 客户 面前 。 


2. 其 他 主要 服务 


电子 邮件 (E-mail) 服 务 : Electronic Mail 是 计算 机 用 户 交换 信息 的 一 种 途径 。 邮 件 地 
址 由 用 户 名 和 主机 名 组 成 ,中 间 由 @ 连 接 , 如 zbdx@nuc. edu. cn, 主 要 遵循 STMP 和 POP3 
协议 ,电子 邮件 服务 主流 软件 是 Foxmail 软件 与 Outlook 软件 。 

文件 传输 服务 (File Transfer Protocol. FTP): 文件 传输 服务 用 于 在 Internet 上 把 文件 
从 一 个 主机 传送 到 另 一 个 主机 上 。 主 要 遵循 FTP 协议 ,文件 传输 服务 主流 软件 有 迅雷 等 。 

远程 登录 服务 (Telnet) ; 远程 登录 用 于 用 户 通过 计算 机 网 络 进入 和 使 用 远程 计算 机 系 
统 。 主 要 遵循 Telnet 协议 ,利用 DOS 窗口 操作 。 


1.2.3 TCP/IP 协议 簇 


网 络 协议 是 关于 信息 格式 及 信息 交换 规则 的 描述 ,或 者 说 是 网 络 中 的 设备 相互 “ 打 交 
道 ” 时 共同 遵循 的 一 套 规则 。 只 有 大 家 都 遵守 制定 的 这 些 规则 ,在 Internet 上 的 信息 才能 畅 
通 无 阻 地 传输 。 

TCP/IP 是 Internet. 上 通用 的 网 络 标准 协议 簇 , 是 上 百 个 各 种 功能 协议 的 总 称 。 前面 
所 提 到 的 HTTP 协议 .FTP 协议 等 都 属于 TCP/IP 协议 徐 。TCP(Transmission Control 
Protocol, 传 输 控 制 协 议 ) 提 供 面 向 连接 的 服务 ,IP(Internet Protocol) 是 互联 网 协议 。 在 
Internet 中 ,应 按照 相应 的 协议 编写 相应 的 信息 进行 传输 数据 ,只 有 按照 协议 规定 ,才能 保 
证 数据 完整 传输 。 

TCP/IP 协议 传输 过 程 ,采用 分 组 交换 的 通信 方式 ,在 发 送 端 ,将 信息 数据 按照 一 定 的 
格式 规则 大 小 封包 ,每 个 数据 包 编 上 序号 ,在 接收 端 ,利用 软件 把 数据 还 原 成 用 户 能 够 读 懂 
的 信息 文件 。 

在 数据 包 传输 的 过 程 中 ,必须 知道 发 送 主机 与 接收 主机 的 地 址 ,才能 确保 数据 包 发 送 成 
3j, IP 协议 负责 记录 发 送 主机 和 接收 主机 的 地 址 ,在 Internet 上 每 一 台 主 机 及 网 络 设备 都 
必须 有 唯一 标识 。IP 地 址 就 像 Internet 上 每 一 个 主机 和 网 络 设备 的 门牌 号 。IP 地 址 是 一 
个 32 位 的 二 进 制 数组 成 的 号 码 ,该 号 码 分 为 4 段 , 每 段 8 位 ,每 段 取 值 范围 在 0 一 255 之 间 。 

IP 地 址 有 两 种 表示 方法 : 二 进 制 和 十 进 制 。 

例如 ,中 北大 学 的 IP 地址 如 下 。 

十 进 制 : 202. 207. xxx. xxx 

二 进 制 : 11001010. 11001111. xxxxxxxx. XXXXXXXX 


1.2.4 域名 


IP 地址 是 由 数字 表示 的 比较 难 记 , 所 以 必须 用 一 种 新 方法 来 代替 这 种 数字 , 即 “域名 ” 
地 址 。 域 名 由 几 个 英文 单词 组 成 ; Internet 域名 是 Internet 网 络 上 一 个 服务 器 或 一 个 网 络 
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系统 的 名 字 ,在 全 世界 没有 重复 的 域名 。 

如 果 要 访问 中 北大 学 的 网 站 ,用 户 可 以 在 浏览 器 的 地 址 栏 中 ,输入 http://202. 207. 
xxx. xxx 打开 中 北大 学 主页 。 访 问 中 北大 学 时 ,也 可 以 不 用 使 用 IP 地 址 ,在 浏览 器 的 地 址 
栏 中 输入 www. nuc. edu. cn 就 可 以 访问 该 网 站 。 而 www. nuc. edu. cen 具有 一 定 的 意义 ,其 
中 cn 代表 中 国 ,edu 代表 教育 网 ,nuc 代表 中 北大 学 ,www 代表 全 球 网 ,整个 域名 合 起 来 就 
代表 中 国教 育 网 上 的 中 北大 学 站 点 。 

域名 易于 记忆 ,但 是 网 络 通信 中 要 使 用 二 进 制 ,所 以 在 传送 信息 之 间 只 能 标识 TP 地 址 。 
对 于 IP 地 址 与 域名 的 关系 可 以 用 一 台 专 门 的 服务 器 一 一 DNS 服务 器 记录 与 解析 。 

域名 的 表示 方法 : 

注册 域名 . 二 级 域名 . 顶级 域名 

CD 顶级 域名 : 分 为 组 织 机 构 (ac 科研 机 构 ,com 工 、 商 \ 金 融 等 企业 ,edu 教育 机 构 ,gov 
政府 部 门 ,net 互联 网 络 . 接 人 网 络 的 信息 中 心 和 和 运行 中 心 ,org 各 社会 团体 及 民间 非 营 利 组 
织 ) 和 地 理 模 式 (cn 中 国 ,jp AAS). 

(2) 二 级 域名 : 由 该 国 自行 确定 ,分 为 类 别 域名 和 行政 区 域名 (sx 山西 ,sh 上 海 )。 

CD 注册 域名 : 在 互联 网 中 申请 注册 的 名 字 , 例 如 nuc. 。 


1.2.5 DNS 服务 器 


DNS(Domain Name System 或 Domain Name Service, 计 算 机 域名 系统 ) 是 由 域名 解析 
器 和 域名 服务 器 组 成 的 。 一 般 来 说 ,在 大 型 的 局 域 网 中 ,都 会 配备 一 台 DNS 服务 器 。 

DNS 服务 器 的 任务 就 是 自动 将 域名 转换 为 对 应 的 IP 地址 。 因 为 虽然 域名 易于 记忆 ， 
但 是 在 Internet 中 网 络 通信 只 能 标识 IP 地 址 。 

域名 系统 采用 类 似 目 录 树 的 等 级 结构 。 域 名 服务 器 为 客户 /服务 器 模式 中 的 服务 器 方 ， 
它 主要 有 两 种 形式 : 主 服务 器 和 转发 服务 器 。 将 域名 映射 为 IP 地 址 的 过 程 就 称 为 “域名 
解析 ”。 


1.2.6 浏览 器 


浏览 器 是 指 将 互联 网 上 的 文本 文档 (或 其 他 类 型 的 文件 ?翻译 成 网 页 ,并 让 用 户 与 这 些 
文件 交互 的 一 种 软件 工具 ,主要 用 于 查看 网 页 的 内 容 。 浏 览 器 有 许多 种 , 按 其 运行 的 平台 分 
类 ,主要 有 基于 UNIX 系统 .Microsoft Windows 系统 和 Apple Macintosh 系统 三 种 类 型 。 
目前 最 常用 的 浏览 器 有 : 美国 微软 公司 的 Internet Explorer 和 Google 公司 的 Chrome、 
Mozila 提供 的 Firefox 等 。 早 期 曾经 很 出 名 的 美国 网 景 公司 的 Netscape Navigator 现在 已 
经 很 少 人 用 了 。 如 图 1. 6 所 示 是 市 面 上 常见 的 浏览 器 图 标 。 





G90099Q 





9 BROWSERS =e 
1.6 浏览 器 图 标示 例 


第 1 章 “网 页 制作 基础 知识 “7 
VY 


142.7 URE 


URL( Uniform Resource Locator, 统 一 资源 定位 器 ) 也 就 是 网 络 地 址 ,是 在 Internet 上 
用 来 描述 信息 资源 ,并 将 Internet 提供 的 服务 统一 编 址 的 系统 。 简 单 来 说 ,通常 在 浏览 器 地 
址 栏 中 输入 的 网 址 就 是 URL 的 一 种 。 

URL 主要 用 来 指明 通信 协议 和 地 址 的 方式 ,以 取得 网 站 提供 的 各 种 服务 , URL 格式 
如 下 : 


< 通信 协议 >: //< 主 机 名 >/< 文 件 路 径 >/< 文 件 名 > 
Hl ; 





Protocol: //host. domain/path/filename 


其 中 ,通信 协议 包括 HTTP. FTP 等 协议 。 主 机 名 指 服务 器 在 网 络 中 的 IP 地 址 (如 
210.77.35.178) 或 域名 (如 www. nuc. edu. cn)。 在 路 径 中 ,主机 名 与 路 径 文件 名 之 间 以 “/” 
分 隔 。 例 如 : http://www. nuc. edu. cn/index. php/。 


1.2.8 超 链接 


超 链 接 (Hyperlink) 是 从 一 个 页 面 跳 转 到 另 一 个 页 面 的 和 人口 , 它 可 以 看 作 是 一 种 文件 的 
指针 ,提供 了 相关 联 文件 的 路 径 , 并 且 可 以 跳 转 执行 相应 的 文件 。 

超 链 接 技术 是 从 一 个 网 页 指向 另 一 个 地 址 的 链接 ,如 指向 另 一 网 页 或 同一 网 页 上 的 不 
同位 置 。 链 接地 址 通常 是 另 一 个 网 页 ,也 可 以 是 一 幅 图 片 一 个 邮件 地 址 等 。 

网 站 内 部 链接 ,是 指 本 网 站 网 页 间 的 链接 。 内 部 链接 一 般 用 相对 路 径 。 相 对 是 指 按 当 
前 所 编辑 的 网 页 所 在 目录 位 置 来 判断 其 他 文件 所 在 的 位 置 ,必须 在 同一 盘 符 内 。 

网 站 外 部 链接 ,是 指 链接 到 其 他 网 站 的 链接 。 


(3 网 页 相关 技术 


1.3.1 网 页 的 本 质 一 一 HTML 


HTML(HyperText Markup Language, 超 文本 标记 语言 ) 是 表示 网 页 的 一 种 标准 。 
HTML 主要 包含 两 个 元 素 : 标识 符 和 属性 。 通 过 在 文本 文档 中 添加 标记 符 和 属性 ,控制 简 
单 的 文本 文档 的 格式 ,使 用 浏览 器 就 能 显示 出 网 页 。 

HTML 元 素 (Element) 构 成 了 HTML 文件 。HTML 文件 是 一 种 包含 很 多 标签 (Tags ) 的 
纯 文本 文件 。 

HTML 文件 可 以 使 用 Windows 系统 的 “记事 本 ?或 者 其 他 的 文本 编辑 器 就 可 以 编辑 
HTML 文件 以 . html ak. htm 为 扩展 名 才 会 被 浏览 器 “认识 "并 “解读 ”出 来 。 
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【 例 1.1] 网 页 示例 。 


<html> 

<head> 

<title> 你 好 !</title> 

</head> 

< body bgcolor = "yellow"> 

<p> 哈 哈 , 我 的 < strong > 第 一 个 </strong > 页面 !</p> 
</body> 

</html > 


1.3.2 网 页 修饰 技术 一 一 CSS 


随 着 技术 的 进步 ,在 网 页 制作 过 程 中 使 用 CSS 技术 已 经 成 为 基本 要 求 。 实 际 上 , 较 新 
版 本 的 Dreamweaver 已 经 将 CSS 技术 作为 默认 的 网 页 修饰 技术 。 

CSS(Cascading Style Sheet, 层 全 样式 表 ) 技 术 是 一 种 格式 化 网 页 的 标准 方式 , 它 扩展 
了 HTML 的 功能 ,使 网 页 设计 者 能 够 以 更 有 效 的 方式 设置 网 页 格式 。 


1.8.3 ”客户 端 脚 本 语言 一 一 JavaScript 


JavaScript 是 由 Netscape 开发 的 一 种 解释 语言 , 它 可 以 直接 插入 到 HTML 文档 中 ,用 
来 给 HTML 网 页 增加 动态 功能 。 

JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 且 有 安全 性 能 的 脚本 语言 。 使 用 它 的 目的 是 
与 HTML 一 起 实现 在 一 个 Web 页 面 与 Web 客户 交互 。 比 如 ,利用 JavaScript 语言 编程 实 
现 客户 端的 注册 页 面 的 数据 校 验 等 。 


1.3.4 服务 器 端 脚本 语言 一 一 PHP,ASP,JSP 


PHP 是 一 种 开源 脚本 语言 ,其 语法 吸收 了 C 语 言 Java 和 Perl 的 特点 ,利于 学 习 , 使 用 
广泛 ,主要 用 于 Web 开发 领域 ,适用 于 动态 网 页 开发 ,处 理 表单 ,与 数据 库 交 互 , 数 据 校 验 等 
内 容 。 

ASP、JSP 与 PHP 在 开发 动态 网 页 的 功能 上 类 似 。ASP 是 微软 公司 开发 的 服务 器 端 脚 
本 语言 ,JSP 是 由 Sun 公司 倡导 ,许多 公司 参与 一 起 建立 的 一 种 动态 网 页 技术 标准 。 


1.3.5 28 E—— MySQL. Access 


数据 库 是 依照 某 种 数据 模型 组 织 起 来 并 存放 在 二 级 存储 器 中 的 数据 集合 。MySQL 是 
一 种 关联 数据 库 管理 系统 ,体积 小 ,速度 快 :总 体 拥 有 成 本 低 ,开放 源 码 , 搭 配 PHP 语言 和 
Apache 服务 器 软件 可 组 成 良好 的 动态 网 页 开发 环境 。 

Microsoft Office Access 是 由 微软 发 布 的 关系 数据 库 管 理 系 统 ,一 般 与 ASP 语言 与 IIS 
服务 器 软件 搭配 开发 。 

制作 网 页 的 简单 技术 分 类 如 图 1.7 所 示 。 
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网 页 技术 分 类 
m PHP 
HTML 标签 语言 ASP | 程序 语言 
XHTML (静态 ) JSP (动态 ) 
XML NET 
Css 解释 语言 Access 
. MySQL 数据 库 
VBScript 脚本 语言 ^ SQL Server } 
JavaScript 


1.7 网 页 相关 技术 分 类 


(i.4 网 站 分 类 与 网 站 托管 


网 站 分 类 


COD 门户 网 站 。 这 类 网 站 是 一 种 综合 性 网 站 ,涉及 领域 非常 广泛 ,包含 文学 .音乐 . 影 
视 、 体 育 、 新 闻 和 娱乐 等 方方面面 的 内 容 , 具 有 论坛 .搜索 和 短信 等 功能 。 现 在 国内 较 著 名 的 
门户 网 站 有 搜狐 (www. sohu. com) 、 网 易 (www. 163. com) 等 。 

(2) 个 人 网 站 。 个 人 网 站 具有 较 强 个 性 化 ,是 以 个 人 名 义 开 发 创建 的 网 站 ,其 内 容 、 样 
式 、 风格 等 都 是 非常 有 个 性 的 。 

(3) 专业 网 站 。 这 类 网 站 具有 很 强 的 专业 性 ,通常 只 涉及 某 一 个 领域 ,内 容 专 业 。 如 榕 
树 下 网 站 (www. rongshuxia. com) 即 是 一 个 专业 文学 网 站 。 

(4) 职能 网 站 。 职 能 网 站 具有 专门 的 功能 ,如 政府 职能 网 站 等 。 目 前 逐渐 兴起 的 电子 
商务 网 站 也 属于 这 类 网 站 , 较 有 名 的 电子 商务 网 站 有 京东 商城 (www. 360buy. com) 、 卓 越 
网 (www. joyo. com) 和 当当 网 上 书店 (www. dangdang. com) 等 。 


1.4.2 网 站 部 署 方式 


在 一 个 网 站 制作 完成 后 ,需要 发 布 出 去 ,让 人 们 看 到 网 站 中 的 信息 内 容 , 就 要 考虑 网 站 
部 署 的 问题 。 目 前 来 说 ,个 人 计算 机 上 网 一 般 采 用 移动 .电信 或 者 联通 的 网 络 ,个 人 计算 机 
使 用 这 些 网 络 的 时 候 是 没有 固定 TP 地 址 的 ,所 以 制作 好 的 网 页 是 不 能 通过 个 人 计算 机 直接 
发 布 出 去 的 。 想 要 发 布 网 站 ,一 般 通 过 以 下 几 种 方式 之 一 完成 : Web 空间 、 虚 拟 主机 技术 、 
主机 托管 技术 .独立 服务 器 技术 。 

CD Web 空间 。 购 买 空间 服务 商 的 Web 空间 ,存放 网 站 页 面 内 容 的 计算 机 存储 空间 。 
空间 服务 商 有 固定 的 TP 地 址 ,网 页 制作 者 可 以 通过 FTP 远程 上 传 网 站 ,发 布 网 站 。 

(2) 虚拟 主机 技术 。 相 对 于 真实 主机 而 言 , 采 用 特殊 的 软 、 硬 件 技术 把 一 台 完 整 的 服务 
器 主机 分 成 若干 个 主机 。 即 把 真实 主机 的 硬盘 分 成 若干 份 , 租 给 不 同 的 用 户 , 但 每 一 份 都 有 
独立 的 域名 与 IP 地 址 ,具有 完整 的 互联 网 服务 器 功能 ,但 共享 真实 主机 的 CPU. RAM fR 
作 系 统 、 应 用 软件 等 。 


1.4.1 
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虚拟 主机 技术 的 优点 如 下 。 

CD 缓解 互联 网 上 IP 及 服务 器 等 资源 的 不 足 。 

四 节省 投资 ,如 服务 器 、 硬 件 设备 等 。 

@ 无 须 租用 专线 ,迅速 拥有 自己 的 域名 及 专属 网 站 。 

(D 管理 简易 ,ISP 完成 绝 大 多 数 管理 工作 。 

© 只 需 对 自己 的 信息 进行 远程 维护 ,无 须 对 硬件 ,操作 系统 及 通信 线路 进行 维护 。 

© 投资 小 ,建立 速度 快 ,安全 可 靠 ,无 须 软 硬件 配置 ,无 须 技术 支持 。 

虚拟 主机 技术 的 缺点 如 下 。 

中 资料 保密 性 差 。 

© 只 能 远程 控制 。 

@ 容易 过 载 ,性 能 下 降 。 

(3) 主机 托管 技术 。 指 的 是 用 户 将 自己 的 独立 服务 器 寄 放 在 互联 网 服务 商 的 机 房 ,日 
常 系统 维护 由 互联 网 服务 商 代理 进行 ,可 以 节约 大 量 的 机 房 环境 、 设 备 维护 等 资金 。 

主机 托管 技术 优点 如 下 。 

O 可 靠 性 是 最 基本 的 因素 。 

@ 重视 安全 问题 。 

@ 随时 升级 。 

CD 独立 服务 器 技术 。 是 指 用 户 的 服务 器 从 Internet 的 接 入 到 维护 ,管理 完全 由 用 户 
自己 操作 。 一 般 是 通过 租用 专用 线路 不 间断 地 连接 Internet。 要 求 考虑 硬件 设施 .软件 系 
统 、 接 人 方式 防火墙、 技术 人 员 配 备 等 。 


小 结 


本 章 介绍 了 网 页 与 网 站 的 基本 概念 ,以 及 网 页 传送 涉及 的 一 些 网 络 规则 和 概念 ,例如 因 
特 网 .HTTP、IP 地 址 ,域名 等 ,与 网 页 与 网 站 相关 的 概念 和 一 些 工 具 软 件 , HTML, CSS, 
JavaScript, PHP 等 语言 ,数据库 ,浏览 器 等 。 在 网 站 制作 完成 后 ,提供 了 一 些 发 布 网 站 空间 
部 署 方案 。 


zB 


.网 页 是 什么 ? 

. 网 站 是 什么 ? 

. IP 地 址 是 什么 ? 

. 域名 是 什么 ? 

. URL 是 什么 ? 

.网 站 部 署 方式 有 哪些 ? 
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本 章 要 点 

。 HTML 概述 ; 

* HTML 标签 概述 ; 
。 HTML 标签 及 使 用 。 


WWW World Wide Web ,万 维 网 ) 是 一 种 建立 在 Internet 上 全 球 性 的 、 交 互 性 的 信息 
资源 网 络 。 要 把 信息 发 布 到 全 球 ,必须 使 用 一 种 大 多 数 计算 机 能 够 识别 的 语言 。 在 WWW 
上 ,通常 使 用 的 语言 是 HTML。 对 于 网 页 设计 和 制作 人 员 ,尤其 是 开发 动态 网 站 的 编程 人 
员 来 说 ,HTML 是 进行 网 页 设计 和 制作 必须 掌握 的 基础 知识 。 


8.1 HTML 概述 
w 


2.1.1 HTML 的 基本 概念 


HTML 是 英文 HyperText Markup Language 的 缩写 ,中 文 意思 是 “ 超 文本 标记 语言 ” 
它 是 用 来 描述 网 页 的 一 种 语言 。HTML 不 是 一 种 编程 语言 ,而 是 一 种 标记 语言 ,通过 对 网 
页 要 显示 的 内 容 中 添加 标记 符 来 告诉 浏览 器 如 何 显示 网 页 。 这 样 , 当 用 户 使 用 Web 浏览 器 
打开 网 页 时 ,浏览 器 读 取 网 页 文件 (HTML 文档 ) ,根据 显示 内 容 周围 的 HTML 标记 符 解释 
和 显示 各 种 内 容 , 而 HTML 标记 符 不 会 在 浏览 器 中 显示 。 

用 HTML 编写 的 文档 称 为 HTML 文档 ,扩展 名 是 . html 或 . htm, HTML 文档 也 被 
称 为 网 页 ,该 文档 中 包含 HTML 标签 和 纯 文本 。 


2.1.2 一 个 简单 的 HTML 实例 


在 介绍 HTML 文档 基本 结构 之 前 , 先 来 看 一 个 简单 的 HTML 文档 及 其 在 浏览 器 上 的 
显示 结果 。 下 面 使 用 文本 编辑 器 (如 Windows 系统 中 的 记事 本 软件 ) 编 写 一 个 HTML 文 
Ri. HTML 文档 名 称 为 “我 的 第 一 个 网 页 . html". 

【 例 2.1】 简单 的 HTML 实例 一 一 我 的 第 一 个 网 页 . html. 

<html> 


<head> 
<title > 网 页 标题 </title> 
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文件 中 


O=- O- HAG Ds X98 " 


地 址 四) (E) D:\htnl\ 我 的 第 一 个 网 页 htnl 


REO FEV KEW IAW 帮助 加 











图 2.1 HTML 示例 


2.1.3 HTML 基本 结构 
要 编写 HTML 文档 ,首先 要 了 解 HTML 文档 的 基本 结构 。HTML 文档 结构 分 为 文 
档 头 和 文档 体 部 分 。 结 构 如 图 2.2 所 示 。 


</html> 





图 2.2 HTML 文档 基本 结构 图 


从 上 述 代 码 中 可 以 看 出 HTML 文档 的 基本 结构 。 最 基本 的 HTML 文档 包括 : 
HTML RÆ — html > fil </html> , X Pi 3k fi 4€ < head > Fil — /head — , 3C Pi bg Hl pg 4 
<title> #il</title> , XHAR <body ></body>. TERE: HTML 文档 标签 不 区 分 大 
小 写 。 


1. <html> 
在 任何 一 个 HTML 文档 中 ,最 先 出 现 的 HTML fi JE <html>, € H 


日 于 表示 该 文档 
是 以 超 文 本 标记 语言 (HTML) 编 写 的 ,这 样 在 解释 执行 的 时 候 就 告诉 浏览 器 或 其 他 阅读 该 页 
的 程序 ,此 文件 为 一 个 Web SL. <html> ERE ROSE UR. EB AE htm RUE E 4E </html> 
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分 别 位 于 文件 的 最 前 面 和 最 后 面 ,网 页 的 其 他 所 有 内 容 都 位 于 这 两 个 标签 之 间 。 该 标签 不 
带 有 任何 属性 。 


2. 3t Risk Es S£ — head — 


XFER bs <head> f F Web 9t ff] JT 3k . OE th BE. BI <head> 3C P 3k A 4 </head>, 
文件 头 部 分 不 包括 Web 页 的 任何 实际 内 容 ,而 是 提供 一 些 与 Web 页 有 关 的 特定 信息 ,如 用 
来 规定 网 页 的 标题 和 编码 方式 等 信息 。 如 果 HTML 文件 并 不 需要 相关 信息 时 ,可 省 略 
<head> </head> fk , 


3. XRRR — title 


在 浏览 器 中 ,网 页 名 称 显示 在 Web 浏览 器 窗口 的 标题 栏 中 ,网 页 名 称 对 浏览 器 的 收藏 
功能 很 有 用 。 网 页 名 称 写 在 标签 一 title 之 和 去 /title 之 之 间 , 到 title 之 标签 成 对 出 现 , 即 
二 title 志 文档 标题 二 /title 二 ,上 且 该 标签 位 于 二 head 二 与 二 /head 二 标签 之 中 。 


4. 文档 体 标签 二 body 二 


<body> bi 4€ ROS tH BL ,<body>Al</body> fif Web 页 的 内 容 , 文 本 、 图 形 、 图 像 、 
链接 等 网 页 要 显示 到 浏览 器 窗口 中 的 内 容 都 位 于 该 标签 内 。 文 档 体 标签 中 的 文字 ,如 果 没 
有 其 他 标签 修饰 , 则 将 以 无 格式 的 形式 显示 。 


2.1.4 编写 第 一 个 HTML 文档 


HTML 是 纯 文本 类 型 的 语言 ,可 以 使 用 任何 文本 编辑 器 (如 Windows 系统 中 的 记事 本 
程序 ) 编 写 。 需 要 注意 的 是 ,要 将 这 些 代 码 保存 为 网 页 格式 , 即 在 保存 时 将 文件 的 扩展 名 改 
写 为 .html 或 . htm。 也 可 用 可 视 化 软件 来 编写 ,如 Microsoft 公司 的 FrontPage, Adobe 公 
司 的 Dreamweaver 等 软件 。 

下 面 用 记事 本 编写 第 一 个 HTML 文档 。 操 作 步 又 如 下 。 

CD 选择 “开始 ”1“ 程 序 ”1“ 附 件 ”1“ 记 事 本 ”命令 ,打开 记事 本 程序 。 

(2) 在 记事 本 中 输入 2.1.2 节 中 的 实例 代码 。 

(3) 选择 菜单 中 的 “文件 ”1“ 保 存 ” 命 令 , 弹 出 “另存 为 "对话 框 。 选 择 文件 保存 路 径 , 在 
“文件 名 ” 框 中 输入 文件 名 称 ,注意 文件 的 后 级 名 为 . html 或 . htm。 然 后 单 击 “ 保 存 ” 按 钮 , 创 
建 完成 。 

使 用 浏览 器 浏览 页 面 效果 ,操作 步骤 : 右 击 刚刚 创建 的 HTML 文件 ,在 弹出 的 快捷 菜 
单 中 选择 打开 方式 ,选择 IE 浏览 器 或 其 他 浏览 器 ,这 样 可 以 在 浏览 器 中 看 到 最 终 的 页 面 
效果 。 

可 以 使 用 浏览 器 查看 网 页 源 代码 。 操 作 步 又 : 选择 浏览 器 菜单 “查看 "1“ 查 看 源 代码 ” 
命令 , 则 在 记事 本 中 显示 目前 所 打开 页 面 的 源 代码 。 

说 明 : 这 里 编写 的 HTML 网 页 属于 静态 网 页 ,该 类 型 网 页 只 给 用 户 提供 浏览 功能 ,用 
户 不 能 和 服务 器 之 间 进 行 交 互 。 本 书后 面 章 节 介绍 的 PHP 语言 ,是 为 了 编制 动态 网 页 。 
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@.2 HTML 标签 概述 


2.2.1 HTML 标签 概念 


HTML 标记 标签 通常 被 称 为 HTML 标签 。HTML 标签 是 由 尖 括 号 包围 的 关键 词 ,如 
<html>, “<A >" EAE fe hs E I es A. 

使 用 标签 有 以 下 三 大 作用 。 

CD 格式 化 文本 。 可 以 通过 使 用 设 定 文本 颜色 、 字 体 、 大 小 以 及 对 齐 方式 的 标签 ,以 及 
设 定 文本 是 标题 文本 还 是 段落 文本 的 标签 ,实现 类 似 于 文字 处 理 软 件 的 排版 功能 。 

(2) 进行 网 页 布局 。 通 过 使 用 表格 、 层 等 标签 实现 对 网 页 内 容 进行 布局 。 

(3) 实现 网 页 超 媒 体 链接 。 通 过 使 用 链接 的 标签 ,实现 不 同 页 面 的 跳 转 以 及 不 同 主题 
的 跳 转 功能 。 


2.2.2 HTML 标签 的 分 类 


HTML 标签 根据 其 格式 分 为 两 类 : 单 标签 和 双 标 签 。 单 标签 只 需 单独 使 用 就 能 完整 
地 表达 意思 。 如 回 车 换行 标签 二 br 之 。 双 标签 成 对 出 现 , 如 过 html 之 生 /html 二 。 大 多 数 
HTML 标签 成 对 出 现 , 标 签 对 中 的 第 一 个 标签 是 开始 标签 ,第 二 个 标签 是 结束 标签 ,结束 标 
签 的 标签 总 是 在 开始 的 标记 前 加 一 斜 丁 。 双 标签 仅 对 包含 在 其 中 的 文件 内 容 部 分 发 生 作 
用 。 如 标题 标签 二 Hl 二 和 二 /HI 二 之 间 的 文本 被 显示 为 标题 。 


2.2.3 HTML 元 素 概念 及 其 使 用 


HTML 元 素 指 的 是 从 开始 标签 到 结束 标签 的 所 有 代码 。 例 如 二 pp 二 This is a 
paragraph 一 /p 二 ,元素 内 容 为 This is a paragraph. Hl HTML 元 素 以 开始 标签 起 始 ,以 结 
束 标签 终止 ,元 素 的 内 容 是 开始 标签 与 结束 标签 之 间 的 内 容 。 没 有 内 容 的 HTML 元 素 被 
称 为 空 元 素 。 空 元 素 是 在 开始 标签 中 进行 关闭 (以 开始 标签 的 结束 而 结束 )。 例 如 ,二 br 二 
就 是 没有 关闭 标签 的 空 元 素 。 在 开始 标签 中 添加 斜 杠 , 例 如 二 br/ 二 ,是 关闭 空 元 素 的 正确 
方法 。 在 XHTML、XML 以 及 未 来 版 本 的 HTML 中 ,所 有 元 素 都 必须 被 关闭 。 

X HTML 元 素 可 拥有 属性 ,属性 为 HTML 元 素 提供 附加 信息 ,属性 总 是 以 “名 
称 / 值 ” 的 形式 出 现 ,比如 : name=" value", JA PER AE f£ HTML 元 素 的 开始 标签 中 规定 。 
例如 ,二 body 二 标签 定义 HTML 文档 的 主体 。 二 body bgcolor= "yellow" 二 拥有 关于 背景 
颜色 的 附加 信息 。 属 性 名 称 为 “bgcolor”, 属 性 值 为 “yellow”。 

X HTML 元 素 可 以 骨 套 (可 以 包含 其 他 HTML 元 素 )。HTML X ihi ic f 
HTML 元 素 构成 。 

[512.2] HTML 元 素 概 念 实例 。 

<html> 

< body> 
< hl > 我 的 第 一 个 网 页 </hl > 
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<! 一 -文件 说 明 : 以 下 内 容 中 的 回 车 和 空格 在 浏览 器 显示 时 会 忽略 -一 > 
<p> 春晓 
FIR A SE BE, 
处 处 闻 啼 鸟 . 
夜来 风雨 声 ， 
花 落 知 多 少 . 
</p> 
</body> 
«/htnl» 
上 面 的 例子 包括 三 个 HTML 元 素 。 以 下 为 几 点 说 明 。 
(1) 任何 回 车 和 空格 在 源 代码 中 不 起 作用 , 即 浏览 器 会 忽略 源 代 码 中 的 排版 (省 略 多 余 
的 空格 和 换行 ) 。 
(2) HTML 源 代码 中 可 以 添加 注释 ,语法 格式 以 “二 !--" 开 始 , 以 “-- 二 "结束 。 注 释 语 
名 只 出 现在 源 代码 中 ,不 会 在 浏览 器 中 显示 。 如 代码 : 


<! -- 文 件 说 明 : 第 一 个 ETL 文件 一 1> 


2.3 HTML 标签 及 使 用 


2.3.1 HTML 文件 基本 标签 


基本 标签 已 在 2. 1. 3 节 中 做 过 介绍 ,下 面 重点 介绍 一 下 二 head 放 头 部 信息 标签 。 

过 head>… 王 /head 一 标签 出 现在 过 html 二 标签 后 面 , 用 来 说 明文 件 的 相关 信息 ,如 文 
件 的 标题 .搜索 引擎 可 用 的 关键 字 等 。 标 签 之 间 的 内 容 不 会 在 浏览 器 文档 窗口 中 显示 ,但 
是 ,其 间 的 元 素 有 特殊 重要 意义 。 

<head> FF meta 元 素 ,一 般 用 来 定义 页 面 信息 的 名 称 、 关 键 字 、 作 者 等 。 在 一 
个 HTML 文档 中 可 以 有 多 个 meta 元 素 。meta 元 素 的 属性 有 两 种 : name 和 http-equiv, 其 
中 name 属性 主要 用 于 描述 网 页 ,以 便于 搜索 引擎 查找 ; http-equiv 属性 用 于 回应 给 浏览 器 
一 些 有 用 信息 ,帮助 浏览 器 正确 和 精确 地 显示 内 容 。 

(1) 常用 的 name 属性 包括 description, keywords,author 等 。 

(D keywords 设置 页 面 关 键 字 。 

用 法 : <meta name 二 "keywords”content 二 "关键 字 1, 关 键 字 2, 关 键 字 3" — 

作用 : 设 定 了 “关键 字 1”, “关键 字 2”,“ 关 键 字 3” 这 三 个 词语 作为 该 页 面 的 关键 字 。 这 
样 可 帮助 搜索 引擎 对 该 网 页 进行 查找 和 分 类 。 所 有 设 定 的 关键 字 不 会 在 网 页 中 显示 。 其 中 
name 为 属性 名 称 ,本 例 中 设置 为 keywords. 即 设置 网 页 的 关键 字 属 性 。 content 中 定义 了 
具体 的 关键 字 的 内 容 。 

© description 设置 页 面 描 述 。 

用 法 : <meta name="description" content 二 "关于 HTML 的 介绍 "二 

作用 : 为 了 便于 搜索 引擎 的 查找 ,设置 了 网 页 的 描述 为 “关于 HTML 的 介绍 ”, 同 关键 
字 一 样 ,设置 的 页 面 描述 也 不 会 在 网 页 中 显示 出 来 。 
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@ author 设 定 作者 信息 。 

用 法 : <meta name- "author" content= "YK Z F"> 

作用 : 用 于 设置 页 面 制作 者 的 姓名 及 个 人 信息 ,这 样 可 在 源 代 码 中 保留 作者 希望 保留 
的 信息 。 

(2) 常用 的 http-equiv 属性 包括 Content-Type, refresh, expires 等 。 各 个 属性 的 作用 
如 下 。 

(D Content-Type 设 定 网 页 文字 及 语言 。 

用 法 : <meta http-equiv="Content— Type" content= "text/html;charset— gb2312"— 

作用 : 设 定语 言 的 编码 方式 为 简体 中 文 。 

@ refresh 设 定 网 页 的 定时 跳 转 。 

用 法 : <meta http-equiv— "refresh" content— "3; url— http: / / www. haol23. com" 

作用 : 从 当前 页 面 在 经 过 指定 的 一 段 时 间 之 后 将 自动 跳 转 到 指定 的 网 页 。refresh X 
示 网 页 的 刷新 ,在 content 中 设 定 刷新 的 时 间 和 刷新 后 的 地 址 ,时 间 和 链接 地 址 之 间 用 分 号 
分 隔 。 默 认 情 况 下 , 跳 转 时 间 以 s 为 单位 。 上 面 的 语句 表示 网 页 将 在 3s 内 跳 转 到 URL 为 
http://www. haol23. com 的 网 页 。 

@ expires 设 定 有 效 期 限 

用 法 : <meta http-equiv="expires" content="Wed,14 September 2014 23:00:00 GMT"> 

作用 : 设置 网 页 到 期 时 间 ,一 旦 超过 到 期 时 间 必 须 到 服务 器 上 重新 调用 。 到 期 时 间 必 
须 是 GMT 时 间 格 式 , 即 星期 .日 月 .年 时、 分 . 秒 ,这 些 时 间 都 使 用 英文 和 数字 进行 设 定 。 
上 面 的 语句 表示 设置 了 网 页 的 到 期 时 间 为 2014 年 9 月 14 日 23:00:00。 


2.3.2 标题 标签 


HTML 中 提供 了 6 个 级 别 的 标题 实现 以 某 种 固定 的 字号 显示 文字 ,通过 和 <hl 二 一 一 h6 
等 标签 显示 1 一 6 级 标题 。 语 法 格式 如 下 : 


1 级 标题 : < hl >…</hl > 
2 级 标题 : < hb2 >…</h2 > 


6 级 标题 : < h6 >…</h6 > 


其 中 ,过 hl 二 定义 最 大 的 标题 ,和 二 h6 之 定义 最 小 的 标题 。 
【 例 2. 3】 标题 标签 实例 。 


<html> 
< head >< title > 标题 示例 </title> </head> 
<body> 
<hl > 1 级 标题 </hl > 
<h2 > 2 级 标题 </h2 > 
<h3 > 3 级 标题 </h3 > 
<h4> 4 级 标题 </h4 > 
<h5>5 级 标题 </h5 > 
<h6 > 6 级 标题 </h6 > 
</body> 
</html > 
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网 页 效果 如 图 2. 3 PR 


IHARA - Microsoft Internet Explorer [o OR) 
文件 到 ) 8g) FEV EQ TAD Hho F 


© HAG st wmr 7 


HEW |E) D: htnl\ 标 题 .htm 


1 级 标题 





2 级 标题 


3 级 标题 
4 级 标题 
5 级 标题 








图 2.3 标题 文字 效果 


2.3.3 字体 标签 


网 页 编辑 中 ,可 以 直接 在 文档 的 主体 部 分 (二 body 二 和 二 /body 二 标签 之 间 ) 输 入 文本 ， 
这 些 文本 会 显示 在 页 面 中 ,可 使 用 二 font 二 标签 设置 文本 不 同 的 显示 效果 。 该 标签 有 三 个 
常用 的 属性 ,face 属性 可 以 设置 不 同 字体 效果 ; size 属性 可 设置 字体 的 大 小 ( 即 字 号 ) ,其 大 
小 是 相对 于 默认 字体 而 言 。 文 字 字 号 可 以 设置 为 1 一 ?7, 默 认 文字 的 大 小 与 3 号 字 相 同 , 数 
值 越 大 ,文字 也 越 大 ; color 属性 可 设置 文字 的 颜色 。 关 于 颜色 属性 值 可 以 使 用 不 同 的 方式 
进行 设置 ,如 可 以 使 用 颜色 名 (如 color=" red") ,也 可 以 设置 为 十 六 进 制 的 颜色 值 (color 王 
" & FF0000") ,或 将 颜色 属性 值 设置 为 RGB( 如 color 二 rgb(255,0,0)), 这 三 种 设置 效果 均 
相同 。 语 法 格式 如 下 : 


«font face = "字体 " size = "文字 字号 " color = "颜色 代码 "> 应 用 该 效果 的 文字 </font > 
[812.4] 设置 文字 字体 格式 实例 。 


<html> 
< head ><title > 设置 字体 格式 </title></head> 
<body> 
< font face = "Times New Roman" > 本 行文 本 字体 为 Times New Roman </font >< br/> 
<font size= "6" > 六 号 字体 </font >< br/> 
< font > 默认 字体 大 小 </font >< br/> 
< font face = "黑体 ”size = "3" color = "red"> 本 行文 本 字体 为 黑体 ,字号 为 3 号 字 , 颜 色 为 红 
色 </font >< br/> 
< font color = "blue" > 本 行文 本 颜色 为 蓝 色 ,其 他 属性 为 默认 设置 </font >< br/> 
< font color = "££0000" > 本 行文 本 颜色 值 (红色 ) 用 十 六 进 制 表示 </font >< br/> 
</body> 
</html> 
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在 浏览 网 页 时 ,可 以 看 到 一 些 特殊 效果 的 文字 ,如 粗 体 字 、 和 斜体 字 以 及 带 下 划 线 的 文字 ， 
这 些 文字 效果 可 以 通过 设置 HTML 标签 来 实现 。 使 用 方法 如 下 : 

< strong > 粗 体 文字 的 效果 </strong> 

<b> 黑 体 文字 的 效果 </b> 


<i> 和 斜体 文字 的 效果 </i> 
<h> 文 字 加 下 划 线 的 效果 </h> 


使 用 二 marquee 二 标签 可 以 使 文字 在 网 页 中 移动 , 即 实 现 滚动 文本 效果 。 使 用 方法 如 下 : 


< marquee bgcolor = "yellow" width= "300" direction = "right" scrollmount = "10"> 
欢迎 光临 我 的 网 页 
</marquee > 
上 面 的 代码 实现 了 ”欢迎 光临 我 的 网 页 "文字 从 页 面 左边 到 右边 的 移动 效果 ,bgcolor 属 
性 用 于 设置 滚动 文字 的 背景 颜色 ,scrollmount 用 于 设置 文字 移动 速度 。 关 于 移动 文字 还 可 
以 通过 设置 marquee 之 标签 的 属性 值 用 于 实现 其 他 效果 。 所 marquee 二 标签 的 属性 及 说 
明 如 表 2. 1 所 示 。 


表 2.1 二 marquee 二 标签 属性 





属 性 说 OA 取 d 
width 文本 区 域 宽度 px( 像 素 值 ) 

height 文本 区 域 高 度 px( 像 素 值 ) 
direction 移动 方向 left, right, up,down 
scrollmount 移动 速度 px( 像 素 值 ) 

loop 循环 次 数 1,2, 

bgcolor 背景 颜色 颜色 值 

align 对 齐 方式 top middle bottom 


2.3.4 格式 控制 标签 


格式 控制 主要 包括 段落 、 换 行 水平 线 和 空格 。 其 中 ,段落 通过 =p 二 标签 来 实现 ,效果 
是 可 以 新 建 一 个 段落 并 加 上 一 个 空 行 ; 如 果 编 辑 网 页 内 容 只 是 需要 换行 ,使 用 二 br/ 二 标 
签 , 一 个 二 br/ 二 标签 代表 一 个 换行 ,连续 的 多 个 二 br/ 二 标签 可 以 实现 多 次 换行 ; <hr> b 
签 用 于 在 页 面 中 添加 一 条 默认 样式 的 水 平 线 。 

【 例 2. 5】 格式 控制 标签 实例 。 





<html> 
<head> < title > 格式 控制 标签 一 -段落 等 </title></head> 
< body> 
<h6> 段落 等 标签 使 用 实例 </h6 > 
<hr/> 


<p> 第 一 段 内 容 </p> 
<p> 第 二 段 内 容 </p> 
<p> 第 三 段 内 容 < br/> 第 三 段 内 容 第 2 行 ( 仍 为 第 三 段 内 容 )< br/> 第 三 段 内 容 第 3 行 ( 仍 为 
第 三 段 内 容 )</p> 
</body> 
</html> 
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段落 居中 对 齐 使 用 二 center 二 标签 。 例 如 ,在 上 面 的 实例 中 实现 第 一 段 内 容 居 中 显示 
可 在 二 p 记 标签 之 前 加 入 二 center 二 标签 ,二 /p 二 之 后 加 入 居中 对 齐 尾 标 签 二 /center 放 , 代 
码 如 下 : 
«center» 
«p» 段落 一 内 容 , 该 段落 居中 对 齐 </p> 
</center > 
<p> 段落 二 内 容 ,该 段落 没有 进行 段落 对 齐 方式 设置 </p> 
另外 ,段落 对 齐 方式 也 可 以 在 二 p 二 标签 中 添加 align 属性 实现 ,align 属性 取 值 可 以 是 
下 列 取 值 之 一 : center( 居 中 对 齐 ) \left( 左 对 齐 ) \right( 右 对 齐 ) 。 默 认为 左 对 齐 方式 。 
二 hr 二 水 平 线 标签 的 常用 属性 包括 width color, align, size 和 noshade 等 ,分 别 用 来 设 
置 水 平 线 的 宽度 .颜色 、 对 齐 方式 ,高 度 和 无 阴影 效果 等 。align 属性 取 值 可 以 是 下 列 取 值 之 
一 : center( 居 中 对 齐 ) left( 左 对 齐 ) .right( 右 对 齐 )。 例 如 二 hr width —"555" size="5" 
align 一 "left”color 王 "blue" 之 ,设置 水 平 线 对 齐 方式 为 页 面 左 对 齐 。 
一 般 情况 下 ,在 网 页 中 输入 文字 时 ,如 果 在 段落 开始 增加 了 空格 ,在 使 用 浏览 器 时 看 不 
到 这 些 空格 。 如 果 需 要 保留 空格 的 效果 , 需 通过 空格 代码 来 代替 。 语 法 格式 为 , &nbsp;。 
在 网 页 中 可 以 有 多 个 空格 ,一 个 *“& nbsp; ”只 代表 一 个 半角 空格 ,多 个 空格 可 以 多 次 使 
用 这 个 符号 。 


2.3.5 图 片 标签 


HTML 文档 能 将 不 同 格式 、 不 同 路 径 的 图 片 插入 到 网 页 中 。HTML 插入 图 片 使 用 
<img> re ,注意 ,该 标签 是 单 标签 。 该 标签 常用 的 属性 包括 src alt, width 和 height 等 ， 
分 别 用 来 设置 图 片 的 路 径 .替代 文字 、 宽 和 高 等 。 基 本 语法 格式 如 下 : 


<img src="URL" alt= "替代 文本 "/> 


其 中 ,URL 指 存储 图 像 的 位 置 , 有 绝对 路 径 和 相对 路 径 两 种 表示 方式 ; alt 属性 值 用 来 
为 图 像 定 义 一 串 预备 的 可 替换 的 文本 。 在 浏览 器 无 法 载 入 图像 时 ,在 图 片 位 置 显示 替代 文 
本 ,如 果 图 片 已 显示 , 则 当 鼠 标 指向 该 图 片 时 显示 蔡 代 文本 。 

HTML 中 有 两 种 路 径 写法 : 绝对 路 径 和 相对 路 径 。 

绝对 路 径 指 文件 的 完整 路 径 , 如 “D:\xscj\images\picl. jpg” 是 picl. jpg 这 个 文件 的 绝 
对 路 径 。 

相对 路 径 指 的 是 从 当前 文件 所 在 位 置 出 发 找到 其 他 文件 或 文件 夹 的 路 径 关系 。 在 网 页 
制作 中 经 常 使 用 该 方法 。 因 为 网 页 都 是 在 本 地 计算 机 上 制作 完成 后 再 上 传 到 Web 服务 器 ， 
本 地 计算 机 和 服务 器 上 的 目录 结构 不 同 。 所 以 建议 在 网 页 中 使 用 到 的 任何 资源 ,首先 复制 
到 网 页 专用 文件 夹 中 ,例如 图 片 文件 夹 (images) ,尽量 使 用 相对 路 径 , 地 址 中 不 要 出 现 本 地 
驱动 器 盘 符 ,例如 “images\picl. jpg". 

相对 路 径 的 引用 方式 如 下 。 

CD 被 引用 文件 与 当前 引用 文件 出 现在 同一 个 目录 : 直接 写 被 引用 的 文件 名 ,“ x . x ”; 

(2) 被 引用 文件 出 现在 当前 引用 文件 所 在 目录 的 下 一 级 目录 中 : 直接 写 下 一 级 目录 文 
件 的 文件 路 径 ,“ 文 件 夹 名 称 \ * . * ”。 





19 


MA 


A 动态 网 站 开发 教程 (Dreamweaver+MySQL+PHP) 


关于 <img 二 标签 的 属性 及 说 明 如 表 2. 2 所 示 。 
R22 <img>RE Rte vA 








属性 属性 说 明 可 用 值 

width 设置 图 像 宽 度 px( 像 素 值 ) 

height 设置 图 像 高 度 px Cs E (ED 

align 设置 图 像 悬 浮 效 果 left right, top, middle, bottom (RU Xf FF FR) 
vspace 设置 图 像 上 下 空白 px( 像 素 值 ) 

hspace 设置 图 像 左右 空白 px( 像 素 值 ) 





【 例 2.6】 图 片 标签 实例 。 


<html> 
<body> 
<h2 > 未 设置 对 齐 方式 的 图 像 : </h2 > 
<p> 请 注意 , 如果 您 把 鼠标 指针 移动 到 图 像 上 ,大 多 数 浏览 器 会 显示 文本 .</p> 
< ing src = "imgs/picl. jpg" alt = "图 片 文本 说 明 " /> 
<p> 通 过 改变 ing 标签 的 "height" 和 "width" 属 性 的 值 ,您 可 以 放大 或 缩小 图 像 .</p> 
< img src = "imgs/picl. jpg" width= "100" height = "100">< br/>< br/> 
< ing src = "imgs/picl. jpg" width= "200" height = "200"> 
<p> 图 像 < img src = "ings/picl.jpg" width = "200" height = "200"> 文 本 </p> 


<h2 > 设置 对 齐 方式 的 图 像 : </h2 > 
<hr> 
<p>< ing src = "imgs/picl. jpg" align = "bottom" width= "200"height = "200"> 底 端 对 齐 </p> 
«p» 

< img src = "imgs/picl. jpg" align="middle" width= "200" height = "200"> 垂 直 居中 对 齐 </p> 
<p>< img src = "ings/picl. jpg" align= "top" width = "200" height = "200"> 顶 端 对 齐 </p> 


<p> 请 注意 , bottom 对 齐 方式 是 默认 的 对 齐 方式 .</p> 
<p>< img src = "ings/picl. jpg" align="left" width = "200" height = "200"> 
带 有 图 像 的 一 个 段落 。 图 像 的 align 属性 设置 为 "left" .图像 显 示 在 文本 的 左 侧 。 
</p> 
< hr/> 
<p>< ing src = "ings/picl.jpg" align= "right" width= "200" height = "200"> 
带 有 图 像 的 一 个 段落 。 图 像 的 align JERE BEA" right". FE f$ Sos fE CAS BE MU 
</p> 
</body> 
</html > 


2.3.6 链接 标签 


超 链 接 是 网 页 页 面 中 最 重要 的 元 素 之 一 ,几乎 所 有 的 网 站 页 面 都 用 到 超 链接 。 超 链接 
可 以 是 一 个 字 , 一 个 词 或 者 一 组 词 ,也 可 以 是 一 幅 图 像 , 单 击 链接 可 以 从 一 个 网 页 跳 转 到 另 
一 个 网 页 ,也 可 以 实现 同一 网 页 中 内 容 之 间 的 跳 转 等 功能 。 基 本 的 链接 方式 分 为 两 种 : 外 
部 链接 和 内 部 链接 。 按 链接 目标 的 不 同 , 超 链接 也 可 以 分 为 页 面 链接 .内 部 锚 记 链接 .图片 
链接 、E-mail 链接 和 下 载 链接 。 创 建 超 链接 的 基本 语法 格式 如 下 : 
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<a href= "资源 地 址 ”> 链接 文本 或 图 片 </a> 

其 中 ,过 a> 标 签 表示 在 HTML 中 创建 链接 ,二 a 宝 和 二 /a 二 标签 之 间 的 文本 、 图 像 或 其 
他 HTML 元 素 被 作为 超级 链接 来 显示 ,href 属性 规定 链接 的 目标 。 对 同一 台 计 算 机 上 的 
文件 进行 链接 ,可 以 采用 绝对 路 径 或 相对 路 径 来 表示 ,一 般 建议 采用 相对 路 径 。 例 如 ， 
<a href—"2, html" 志 第 二 个 网 页 二 /a 二 , 当 单 击 文本 “第 二 个 网 页 ”时 ,从 当前 页 面 跳 转 到 
另 一 页 面 2. html。 链 接 的 目标 也 可 以 是 URL 地 址 ,例如 ,一 a href — "http://www. nuc. 
edu, en" > PAL KA </a> , 单 击 “ 中 北大 学 ”这 个 链接 会 打开 链接 网 站 首页 。 

二 a 二 标 签 的 属性 主要 包括 target 属性 和 name 属性 ,以 下 分 别 介 绍 。 


1. target 属性 
target 属性 用 于 设置 被 链接 的 目标 在 何 处 显示 。 默 认 在 原 窗 口中 打开 链接 。 下 面 的 代 
码 会 在 新 窗口 中 打开 文档 : 
<a href = "http://www. nuc. edu. cn/" target = "_ blank"> 中 北大 学 </a> 
target 属性 取 值 及 说 明 如 表 2. 3 所 示 。 
表 2.3 target 属性 取 值 及 说 明 





target 属性 取 值 说 RA 
_self 在 原 窗口 显示 链接 页 面 
blank 在 新 窗口 显示 链接 页 面 
_parent 在 上 一 级 窗口 中 打开 
_top 在 浏览 器 的 整个 窗口 中 打开 ,忽略 任何 框架 
2. name 属性 


name 属性 实现 创建 文档 内 的 书签 的 功能 , 且 书 签 不 会 显示 到 页 面 。 该 属性 值 用 于 规定 
锚 的 名 称 , 当 使 用 命名 锚 时 ,可 以 创建 直接 跳 至 该 命名 锚 ( 比 如 页 面 中 某 一 部 分 内 容 ) f fik 
接 , 这 样 无 须 滚动 页 面 来 寻找 所 要 寻找 的 内 容 。 效 果 如 图 2.4 所 示 。 当 单 击 链接 * 第 二 部 
分 ?时 ,直接 跳 转 到 当前 页 面 中 第 二 部 分 内 容 显示 ,效果 如 图 2.5 所 示 。 


emm |g tnn. Ta 


内 部 锚 记 链接 实例 : 超 链接 内 容 介 绍 | 











第 一 部 分 | 第 二 部 分 | 第 三 部 分 | 第 四 部 分 | 


第 一 部 分 
超 链接 是 网 页 页 面 中 最 重要 的 元 素 之 一 。 几 乎 所 有 的 网 站 页 面 都 用 到 起 链 
接 ， 点 击 链接 可 以 从 一 个 网 页 跳 转 到 另 一 个 | 人 也 可 以 实现 同一 网 页 中 内 容 之 
REN 超 链接 可 以 是 一 个 字 、 一 个 词 或 者 一 组 词 ， ADM Wn 
Anis nati clama A CS TTS 
说 明 ， 以 下 为 页 面 链接 ， 单 击 链接 到 另 一 网 页 
第 二 个 网 页 
RA: 以 下 为 文档 内 部 链接 ， 单 击 返回 本 文档 头 部 
xg 





图 2.4 内 部 锚 记 链接 


21 


™ 


22 


nva 


动态 网 站 开发 教程 (Dreamweaver+MySQL+PHP) 





ete irse. 





第 二 部 分 
meee store Rte tarse RHE T SHER OE EAT 


。 SALERRO : 
parean (itin eX SED MER. RA RUE 


说 明 ， 以 下 为 文档 内 部 链接 ， 单 击 返 回 本 文档 头 部 
返回 





图 2.5 单 击 链接 后 的 效果 


命名 锚 的 语法 格式 s 

<a nane = "链接 文字 名 称 "> 锚 (显示 在 页 面 上 的 文本 )</a> 

下 面 通过 一 个 实例 来 学 习 name 属性 的 使 用 步骤 : 在 HTML 文档 中 对 锚 进 行 命名 
(创建 一 个 书签 ): <a name 二 "C1" 二 第 一 部 分 内 容 详细 介绍 二 /a 二 ; @ 在 同一 个 文档 中 创 
建 指向 该 锚 的 链接 : <a href=" # Cl1" 二 第 一 部 分 二 /a>; 也 可 以 在 其 他 页 面 中 创建 指向 
该 锚 的 链接 : <a href="2. html #C1" 第 一 部 分 过 /a 字 。 该 实例 代码 将 # 符 号 和 锚 添 加 
到 网 页 文件 2. html 名 称 后 面 ,直接 单 击 “第 一 部 分 ”文字 就 可 以 链接 到 和 当前 文件 在 同一 文 
件 夹 下 的 2. html 的 Cl 命名 锚 了 。 

前 面 的 内 容 主 要 涉及 页 面 链接 和 内 部 锚 记 链接 ,以 下 介绍 其 余 类 型 的 链接 。 

创建 图 片 链 接 的 格式 : 


<a href = "资源 地 址 ">< img src= "图 形 文件 地 址 " ></a> 
即 在 二 a 二 和 二 /a 二 之 间 包 含 二 img src— " "二 ,通过 鼠标 单 击 就 可 以 链接 到 href 属性 所 指 


定 的 文件 。 
创建 电子 邮件 链接 的 格式 : 


<a href = "mailto:username@163. com " > 请 联系 我 们 Email </a> 


其 中 ,username@163. com 为 用 户 邮 箱 地 址 ,鼠标 单 击 后 直接 调用 用 户 计算 机 上 默认 
邮件 收发 工具 Outlook 等 。 

如 果 希 望 制作 下 载 文件 的 链接 ,只 需 在 链接 地 址 处 输入 文件 所 在 的 地 址 。 下 载 链接 的 
格式 : 


<a href= "文件 所 在 地 址 ”> 链接 文字 </a> 


注意 : 在 文件 所 在 地 址 中 设置 文件 的 路 径 , 可 以 是 相对 路 径 , 也 可 以 是 绝对 路 径 。 
空 链接 : 所 谓 空 链接 是 指 在 单 击 链接 后 ,仍然 停留 在 当前 页 面 。 在 代码 中 可 以 通过 并 
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符号 来 实现 空 链接 。 语 法 格式 : 


<a href = " # "> 链接 文字 </a> 
[512.7] 超 链接 综合 实例 代码 。 实 现 效 果 如 图 2.4 所 示 。 


<html> 
<head>< title > 文本 内 部 链接 </title></head> 
<body> 
<hl align=center ><a name = "C0"> 内 部 锚 记 链接 实例 : 超 链接 内 容 介 绍 </a></hl > 
<center> 
<a href = "# Cl"> 第 一 部 分 </a>| 
<a href ="#C2"> 第 二 部 分 </a>| 
«a href = "#C3"> 第 三 部 分 </a>| 
<a href ="#C4"> 第 四 部 分 </a>| 
</center> 
<hr size = 3 color = red align= left > 
< center >< h2 ><a name = "Cl"> 第 一 部 分 </a></h2 ></center > 
< p> &nbsp;&nbsp; Snbsp; &nbsp; 超 链接 是 网 页 页 面 中 最 重要 的 元 素 之 一 。 几 乎 所 有 的 网 站 页 面 都 
用 到 超 链接 , 单 击 链接 可 以 从 一 个 网 页 跳 转 到 另 一 个 网 页 。 也 可 以 实现 同一 网 页 中 内 容 之 间 的 跳 转 
等 功能 。 超 链接 可 以 是 一 个 字 ,一 个 词 或 者 一 组 词 ,也 可 以 是 一 幅 图 像 ,通过 单 击 这 些 内 容 来 跳 转 到 
新 的 文档 或 者 当前 文档 中 的 某 个 部 分 。</p> 
<center ><p> 说 明 : 以 下 为 文档 内 部 链接 , 单 击 返回 本 文档 头 部 </p></center> 


< center ><a href ="#C0"> 返 回 </a></center> 


< center >< h2 ><a name = "C2"> 第 二 部 分 </a></h2 ></center > 

< p> &nbsp;&nbsp;&nbsp;&nbsp; 超 链接 第 二 部 分 内 容 :target 属性 target 属性 用 于 设置 被 链接 的 
目标 在 何 处 显示 。 默 认 在 原 窗口 中 打开 链接 ; nane 属性 实现 创建 文档 内 的 书签 的 功能 , 且 书 签 不 会 
显示 到 页 面 。 该 属性 值 用 于 规定 锚 的 名 称 , 当 使 用 命名 锚 时 ,可 以 创建 直接 跳 至 该 命名 锚 (比如 页 面 
中 某 一 部 分 内 容 ) 的 链接 ,这 样 无 须 滚动 页 面 来 寻找 所 要 寻找 的 内 容 。 

</p> 

<center ><p> 说 明 : 以 下 为 文档 内 部 链接 , 单 击 返 回 本 文档 头 部 </p></center > 


< center ><a href = " + CO">i& [n]c/a » «/center > 


< center >< h2 ><a name = "C3"> 第 三 部 分 </a></h2 ></center > 

< p> &nbsp;&nbsp;&nbsp;&nbsp; 超 链接 第 三 部 分 内 容 : 基 本 的 链接 方式 分 为 两 种 : 外 部 链接 和 内 
部 链接 。 按 链接 目标 的 不 同 , 超 链 接 也 可 以 分 为 页 面 链接 .图 片 链接 上- mail 链接、 下载 链接 和 内 部 
锚 记 链接 。 前 面 的 内 容 主要 涉及 页 面 链接 和 内 部 锚 记 链接 , 以 下 介绍 其 余 类 型 的 链接 。</p> 

< center ><a href = " # CO">i& [n]c/a » «/center > 


< center >< h2 ><a nane = "C4"> 第 四 部 分 </a></h2 » «/center > 
«hi > 超 链接 第 四 部 分 内 容 :总 结 </hl >< hr/> 
页 面 链接 (链接 到 ) : <a href = "http://www. nuc. edu. cn" target = ”blank"> 中 北大 学 </a>< br/> 
<p> 说 明 : 以 下 为 文档 内 部 链接 , 单 击 返回 本 文档 头 部 </p> 
内 部 锚 记 链接 : <a href = "# C0"> 返 回 </a>< br/> 
图 片 链接 : 
<a href = "2. html">< img src = "imgs/picl. jpg" width = "80" height = "80"></a >< br/> 
E- mail 链接 : <a href = "mailto:username@163.com" > 请 联系 我 们 Email </a>< br/> 
下 载 链接 : <a href = "压缩 文件 . zip"> 链 接 文字 </a></p> 
<center><a href =" 井 C0"> 返 回 </a></center > 
</body> 
</html> 
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2.3.7 表格 标签 
使 用 表格 可 以 清晰 地 显示 数据 ,在 HTML 中 还 可 以 使 用 表格 来 实现 网 页 布局 功能 。 


创建 表格 使 用 的 基本 标签 如 下 。 
(1) <table>+++</table> 定义 表格 
(2) —captionZ--— /caption- ”定义 表格 标题 
(3) Ktr> </tr> 定义 表格 中 的 一 行 ,如 果 是 多 行 , 则 多 次 出 现 
(4) —th--—/h» 定义 表 头 单元 格 , 文 本 黑体 居中 
(5) <td>…</td> 定义 普通 单元 格 ,每 行 被 分 为 若干 个 单元 格 
[9502.8] 表格 实例 。 
<html> 
< head» « title > 表格 实例 </title></head> 
<body> 


<table border =3> 
< caption» XXX 班 学 生成 绩 表 </caption> 
<tr> <! -- 表格 第 一 行 --> 
<th> 学 号 </th> <th> 姓 名 </th>< th> 语 文 </th>< th> 数 学 </th>< th> 平 均 分 数 </th> 
</tr> 
<tr> <! -- 表格 第 二 行 --> 
« td» 0001 </td>< td> 张 三 </td>< td» 92 </td><td>98.5</td><td>95.3</td> 
</tr> 
<tr> <! -- 表格 第 三 行 --> 
< td> 0002 </td><td> 李 四 </td><td> 88 </td>< td> 82 </td>< td> 85 </td> 
</tr> 
<tr> <! -- 表格 第 四 行 -一 > 
<td> 0003 </td><td> 王 五 </td><td> 68.5</td><td>90</td><td>79.3</td> 

























</tr> 
</table> 
</body > 
</html> 
i3 一 个 4 行 ge 实 
"A 该 实例 创建 了 一 个 4 行 5 列 的 表格 。 实 例 效果 如 图 2. 6 DUERA 
示 。 > = 
. 学 号 姓名 语文 数学 证 均 分 数 
表格 的 属性 设置 如 下 。 0001 KE [oz [98.5 [95.3 — 
CD 表格 大 小 尺寸 设置 : <table width="x" height= [0002 FG 
Hy" > 0003 Th 
说 明 : x y 代表 具体 的 像素 值 。 以 下 同 。 例 如 : <table 图 2.6 表格 示例 


width 一 "400" height="300">. 

(2) 边框 尺寸 设置 : <table border— "z" 

说 明 : 如 果 不 定 义 边框 属性 ,表格 将 不 显示 边框 。 通 过 此 属性 建立 有 框 线 或 无 框 线 的 
表格 ,上 例 中 使 用 边框 属性 来 显示 一 个 带 有 边框 的 表格 : <table border— "3", 

(3) 单元 格 边 距 及 单元 格 间距 属性 的 设置 : 


<table width= "x" border = "y" cellspacing = "z" cellpadding = "2"> 
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说 明 : cellspacing 属性 值 用 来 设置 单元 格 的 间距 ,cellpadding 属性 值 用 来 设置 单元 格 
内 容 距 离 单 元 格 边框 的 像素 值 。 

(4) 单元 格 中 内 容 对 齐 方式 设置 。 

两 种 方式 : @O 左 右 排列 ,使 用 align RYE. <tr align—" #">,<th align="#">, 
<td align="#">, Hp align 取 值 可 以 是 left; center 或 right, 分 别 代 表 左 对 齐 、 居 中 对 齐 
或 右 对 齐 。@ 上 下 排列 : 使 用 valign RHE. <tr valign—" £"—,—th valign=" # ">, 
<td valign="4">. HOP valign 取 值 可 以 是 top. middle 或 bottom ,分 别 代表 顶端 对 齐 、 居 
中 对 齐 或 底部 对 齐 。 

(5) 表格 在 网 页 中 的 对 齐 方式 设置 : <table align=" # ">. 

说 明 : 其 中 align 取 值 可 以 是 left、center 或 right. 

(6) 表格 背景 颜色 或 背景 图 像 设置 。 

表格 背景 颜色 : <table bgcolor=" #">, 

表格 背景 图 像 : <table background="imgs/picl. jpg" >. #£47. background 属性 值 为 
背景 图 像 文件 路 径 。 

行 的 背景 颜色 : <tr bgcolor="#">. 

单元 格 背景 颜色 : <th bgcolor=" £ "二 或 一 td bgcolor=" # ">, 

单元 格 背景 图 像 : <th background" imgs/picl. jpg" 73K — td background =" imgs/ 
picl. jpg">. 

边框 颜色 : <tr bordercolor—" # ">, 

(7) 跨行 或 跨 列 的 表格 单元 格 设置 。 

合并 列 : <th colspan=" £ "7 ,—td colspan=" # ">, 

合并 行 : <th rawspan="#">,<td rawspan=" # ">, 

【 例 2p 合并 单元 格 实例 ,效果 如 图 2.7 所 示 。 lol PAE Xx 

实例 核心 代码 如 下 。 T3 MITES BER 入 学 年 月 


Wc Odes e R= Be oousi ani 
002 Spa (0 060141 {2012 
< th rowspan = "2"> 学 号 </th> 
«th colspan- "3"> 个 人 信息 </th> 
< th colspan = "2"> 人 学 信息 </th> 
</tr> 
<tr> 二 = 第 二 行 ==> 
<th> 姓 名 </th>< th> 性 别 </th>< th> 年 龄 </th>< th> 班 级 </th>< th> 入 学 年 月 </th> 
</tr> 
<tr> <! - B= --> 
< td» 001 </td> < td »3K =</td> < td> 男 </td> < td» 19 </td> < td» 060141 </td> < td» 2012 
</td> 
</tr> 
<tr> <! -第 四 行 --> 
< td> 002</td><td> 李 四 </td> <td> 男 </td><td>20</td><td> 060141 </td> < td» 2012 
</td> 
</tr> 


该 实例 在 表 头 部 分 填写 * 学 号? 内容 的 单元 格 跨越 三 行 ,填写 "个 人 信息 ”内 容 的 单元 格 
跨越 三 列 。 

















图 2.7 合并 单元 格 示例 
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网 页 布局 对 改善 网 站 的 外 观 非常 重要 。 表 格 是 创建 布局 的 一 种 简单 的 方式 。 大 多 数 网 


站 会 把 内 容 安 排 到 多 个 列 中 ,可 以 使 用 二 table 二 标签 来 创建 多 列 。 


【 例 2.10】 本 例 使 用 三 行 两 列 的 表格 一 一 第 一 行 和 最 后 一 行使 用 colspan 属性 来 横 跨 


两 列 。 页 面 效 果 如 图 2.8 Wr. 


导航 菜单 。 本 页 面 详细 内 容 


图 2.8 HTML 布局 一 一 使 用 表格 


实例 核心 代码 如 下 。 


< table width = "500" border = "0"> 
<tr> 
<td colspan = "2" style = "background - color: # 99bbbb"> 
< center >< hl > 网 站 主 界面 标题 </hl ></center > 
</td> 
</tr> 
«tr valign="top"> 
<td style = "background- color: # ffff99; width: 100px; text — align: top; "> 
<b> 导 航 菜单 </b>< br/>< br/» 
菜单 选项 1 < br/> 
菜单 选项 2 < br/> 
菜单 选项 3 
</td> 


< td style = "background - color: # EEEEEE; height : 200px; width: 400px; text - align: top; "> 


本 页 面 详细 内 容 </td> 
</tr> 
<tr> 
< td colspan = "2" style = "background - color: # 99bbbb; text - align:center; "> 
版 权 所 有 </td> 
</tr> 
</table> 


说 明 : 即使 可 以 使 用 HTML 表格 来 创建 漂亮 的 布局 ,但 设计 表格 的 目的 是 呈现 表格 化 
数据 。 表 格 是 创建 布局 的 一 种 简单 的 方式 。 在 HTML 中 ,可 以 使 用 其 他 方式 对 网 页 进行 


布局 ,如 使 用 二 div 过 元素。 
2.3.8 框架 标签 


前 面 所 介绍 的 网 页 都 是 在 浏览 器 窗口 中 显示 一 个 网 页 页 面 ,本 节 介 绍 框架 标签 
用 框架 ,可 以 在 同一 个 浏览 器 窗口 中 显示 多 个 页 面 。 框 架 的 实例 效果 如 图 2.9 和 





图 2. 10 
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所 示 。 


FrameB 


图 2.9 垂直 框架 图 2. 10 水 平 框架 


垂直 框架 将 浏览 器 垂直 分 隔 为 三 部 分 ,每 一 部 分 使 用 不 同 的 文档 。 水 平 框架 将 浏览 器 
水 平分 隔 为 三 部 分 ,同样 ,每 一 部 分 使 用 不 同 的 文档 , 即 一 个 浏览 器 窗口 同时 显示 三 个 页 面 。 
每 份 HTML 文档 称 为 一 个 框架 ,并 且 每 个 框架 都 独立 于 其 他 的 框架 。 框 架 主 要 包括 两 个 部 
分 ,一 个 是 框架 结构 二 frameset 二 , 另 一 个 是 框架 二 frame 记 ,其 中 框架 结构 标签 (二 frameset 记 ) 
定义 如 何 将 窗口 分 割 为 框架 ,二 frame 二 标签 包含 在 二 frameset 二 标签 之 内 ,该 标签 定义 了 
放置 在 每 个 框架 中 的 HTML 文档 。 


1. 二 frameset 二 标签 属性 


每 个 frameset 定义 了 一 系列 行 或 列 ,rows 和 columns 属性 值 规定 了 每 行 或 每 列 占据 屏 
幕 的 大 小 。 如 果 使 用 rows 属性 ,用 于 水 平分 隔 窗口 ,各 个 框架 窗口 的 宽度 (水 平分 隔 时 ) 或 
高 度 (垂直 分 隔 时 ) 值 中 间 用 ”*, ”分隔 ,框架 宽度 单位 可 以 是 绝对 像素 值 .百分数 或 * 号 。 

说 明 : 当 符 号 * 只 出 现 一 次 ,其 中 * 号 表示 其 他 子 窗口 的 大 小 都 有 明确 的 宽度 或 高 度 
值 时 ,该 子 窗口 的 大 小 将 根据 浏览 器 窗口 的 大 小 而 自动 调整 为 剩余 部 分 。 当 符号 * 出 现 一 
次 以 上 时 ,表示 按 比例 分 割 浏览 器 窗口 的 剩余 空间 。 例 如 所 frameset cols "4025. * , * ">, 
该 例 将 浏览 器 窗口 分 割 为 三 列 , 第 一 个 子 窗口 在 第 一 列 ,窗口 宽 度 为 整个 浏览 器 窗口 宽度 的 
40545 剩 下 的 空间 平均 分 配给 另外 两 个 子 窗口 。 


2. —frame te 


Jte <frameset></frameset> Z [B] . AK bici F A H , fE — frameset 7 H E XC T BD 
个 子 窗口 RA D4 <frame> rE 53 Z VU RO. [XE LAP PET TEE. — frame tr 
签 具有 src 和 name 属性 ,这 两 个 属性 都 是 必须 赋值 的 。 

src 属性 用 于 设置 子 窗口 的 源 HTML 文件 名 ,浏览 器 将 会 在 此 窗口 中 显示 src 指定 的 
HTML x ff; 下 面 的 这 个 例子 中 ,创建 了 一 个 两 列 的 框架 集 。 第 一 列 被 设置 为 占据 浏览 器 
窗口 的 25%, 第 二 列 被 设置 为 占据 浏览 器 窗口 的 75%。HTML 文档 frame a. htm 被 置 于 
第 一 个 列 中 ,而 HTML 文档 frame b. htm 被 置 于 第 二 个 列 中 ,代码 如 下 : 


< frameset cols = "25 % , * "> 
< frame src = "frame _a. html" name= "Left"> 
< frame src = "frame_b. html" name = "Right"> 


</frameset > 
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name 属性 用 于 设置 子 窗 口 的 名 字 , 上 面 的 代码 将 框架 集中 的 第 一 列 , 也 即 左边 子 窗口 
命名 为 “Left”, 将 框架 集中 的 第 二 列 , 也 即 右边 子 窗口 命名 为 “Right”, 通 过 该 设置 , 超 文本 
链接 标签 二 a href=" " target—" "二 中 的 target 属性 就 可 指定 被 链接 的 HTML 文件 将 显 
示 在 哪 一 个 子 窗口 中 。 

【 例 2. 11】 使 用 框架 导航 跳 转 至 指定 的 页 面 , 本 例 演示 两 个 框架 。 左 侧 的 导航 框架 包 
含 一 个 链接 列表 ,这些 链接 将 第 二 个 框架 作为 目标 。 第 二 个 框架 显示 被 链接 的 文档 。 导 航 
框架 其 中 的 链接 指向 目标 文件 中 指定 的 节 。 实 例 效 果 如 图 2. 11 所 示 。 

* tu D - m EN 
目录 (请 点 击 链接 ) FrameB 
二 same_a 页 面 链接 


二 ame_b 页 面 链接 
frame < 页 面 链接 














图 2.11 使 用 框架 导航 


核心 代码 如 下 。 
CL) ÄH. html, 


<html> 
<head><title> 框 架 标签 的 综合 示例 </title></head> 
< frameset cols = "25 % , * "> 
< frame src = "menu. html" scrolling = "no" name = "Left"> 
< frame src = "frame_a. html" scrolling = "auto" name = "Main"> 
</frameset > 
«/htnl» 


(2) 左 侧 的 导航 框架 链接 页 面 menu. html, 


< html > 
< head» 
<title> 目 录 </title> 
</head> 
<body> 
<p>< font color = " # FF0000"5 H $ ( if cid; HEE )</font ></p> 
<p><a href = "frame a. html" target = "Main"> frame a 页 面 链 接 </a></p> 
<p><a href = "frame b.htnl" target = "Main"> frame b 页 面 链接 </a></p> 
<p><a href = "frame c. html" target = "Main"> frame c Ji Mi ###:</a></p> 
</body > 
</html> 
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3. 二 frame 记 其 他 相关 属性 设置 


二 frame 放 其 他 相关 属性 设置 说 明 如 表 2. 4 所 示 。 
表 2.4 二 frame> 其 他 相关 属性 设置 








属 性 说 A m 值 
frameborder 设置 框架 边框 0 或 1,0 为 无 边框 ,1 为 显示 边框 
scrolling 设置 框架 滚动 条 是 否 显示 yes,no,auto 

noresize 设置 是 否 可 调整 框架 尺 十 noresize 禁止 调整 ,默认 为 可 调整 





在 HTML 文档 中 的 一 个 区 域 插入 一 个 HTML 文档 , 称 为 浮动 框架 ,也 称 内 联 框架 , 编 
写 代 码 时 不 需要 在 单独 的 网 页 中 创建 框架 集 ,使 用 二 iframe 二 标签 即 可 建立 ,建立 同时 可 设 
置 浮 动 框架 的 宽度 和 高 度 等 属性 。 

基本 语法 格式 如 下 : 

< iframe src = "X fF ib hb" height =" fÉ" width =" ffi" name = "框架 名 称 " scrolling =" ffi" 

frameborder = " 值 "> 

去 iframe> 标 签 的 部 分 属性 详细 说 明 如 表 2. 5 所 示 。 

表 2.5 <iframe> $R 3$ 89 8843 MM tE VERRE UR 





RB 性 说 明 g ff 
sre 设置 浮动 框架 文件 的 文件 名 或 其 他 超 链 
接 的 网 址 
width height ”分 别 设置 浮动 框架 的 宽度 、 高 度 数值 
name 设置 浮动 框架 的 名 称 
frameborder 设置 框架 边框 0 或 1,0 为 无 边框 ,1 为 显示 边框 
scrolling 设置 框架 滚动 条 是 否 显示 yes,no,auto( 根 据 窗口 内 容 决 定 是 否 显示 ) 


【 例 2.12】 内 联 框架 实例 效果 如 图 2. 12 所 示 。 


\> 


Tm 





国 | 


图 2. 12 ”内 联 框架 效果 


核心 代码 如 下 。 


<body> 
< iframe src = "/i/eg landscape. jpg"></iframe > 
</body > 
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2.3.9 列表 标签 


列表 是 一 种 以 结构 化 、 易 读 性 的 方式 提供 信息 的 方法 。HTML 常用 的 列表 形式 包括 有 
序列 表 和 无 序列 表 。 


1. 无 序列 表 


无 序列 表 是 指 列表 中 列表 项 的 前 导 符号 没有 次 序 , 此 列 项 目 使 用 粗 体 圆 点 (典型 的 小 黑 
圆圈 ) 、 方 框 等 特殊 符号 进行 标记 。 无 序列 表 开 始 于 二 二 标签 ,每 个 列表 项 开始 于 二 li>。 
例如 

<ul> 

<1i>Coffee</li> 
<1i>Milk</li> 
</ul> 


该 实例 在 浏览 器 中 显示 如 下 : 

* Coffee 

* Milk 

设置 列表 项 目前 导 符号 可 通过 二 ul 二 标签 的 type 属性 。 属 性 取 值 为 disc, circle 或 
square, 分 别 代表 实心 圆 @ .空心 圆 〇 、 方 框 

列表 项 内 部 可 以 使 用 段落 .图片 、 链接 以 及 其 他 列表 等 


2. 有 序列 表 














有 序列 表 的 每 个 列表 项 目 使 用 数字 等 进行 标记 , 且 是 有 顺序 的 。 有 序列 表 开始 于 二 ol 二 
标签 。 每 个 列表 项 开始 于 二 li 二 标签 。 例 如 : 
<ol> 
<1i>Coffee</li> 
«li»Milk«/li» 
</ol> 


该 实例 在 浏览 器 中 显示 如 下 : 


1. Coffee 
2. Milk 


有 序列 表 的 列表 项 除 默 认 使 用 阿拉 伯 数 字 进 行 标 记 外 ,还 有 其 他 的 排序 方式 ,可 通过 
二 ol 二 标签 的 type 属性 设置 。 属 性 取 值 : 1( 阿 拉 伯 数字 序列 )、a( 小 写 英 文字 母 序列 )、A 
(大 写 英文 字母 序列 )、i (小 写 罗马 数字 序列 i. ii. il). LAS? SREP LMM). 
3. WRKE EA 


【 例 2.13) 列表 综合 应 用 实例 ,效果 如 图 2.13 所 示 。 
实例 核心 代码 如 下 。 
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<ul type = square? 
<1i> 第 一 项 </1i> 
<1i> 第 二 项 </1i> LER 
<1i> 第 三 项 </1i> : I 
<1i> 第 四 项 </1i> B 
</ul> 6. 第 二 项 
zx 
<ol start=5> 。 直 连 
«li type = a > 第 一 项 </1i> 
<1i> 第 二 项 </1i> 
<1i> 第 三 项 </1i> 。 省 
<1i> 第 四 项 </1i> 


</ol> 





<ul> 图 2.13 列表 示例 
<1i> 直 辖 市 
<ol> 
<1i> 北 京 市 
<1i> 天 津 市 
<1i> 上 海 市 
<1i> 重 庆 市 
</ol> 
</li> 
<li> 
<ol> 
< 1i> 福 建 省 
<li> RE 
< 1i> 湖 北 省 
<21>... 
</ol> 
</li> 
</ul> 


2.3.10 表单 标签 


表单 (Form) 是 HTML 的 一 个 重要 组 成 部 分 ,用 来 收集 浏览 者 的 信息 ,并 将 信息 提交 给 
服务 器 进行 处 理 。 表 单 中 包含 很 多 表单 控件 ,常用 的 表单 控件 包括 单行 文本 输入 框 、 密 码 
框 、 多 行文 本 输入 框 . 单 选 按钮 、 复 选 框 .下 拉 列 表 框 .提交 和 重 置 按钮 。 下 面 分 别 讲 述 这 些 
表单 及 表单 控件 的 标签 以 及 代码 格式 。 


1. 表单 标签 的 格式 


去 form> 是 表单 的 标签 ,所 有 的 表单 控件 在 使 用 时 必须 放 在 过 form 之 和 志 /form> 之 
间 。 代 码 格式 : 


< form action= "url" name =" " method =" "></form> 


属性 解释 : 
(1) action 一 "url": 定义 当 提 交 表 单 时 向 何 处 发 送 表 单数 据 。 
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(2) name: 定义 表单 的 名 称 。 
(3) method: 取 值 可 以 是 get 或 post, 规 定 用 于 发 送 form-data 的 HTTP 方法。 


2. 文本 输入 框 
当 用 户 要 在 表单 中 输入 字母 数字 等 内 容 时 ,会 用 到 文本 框 。 代 码 格式 : 


" 


«input type="text" name=" 


属性 解释 : 

(1) type="text": 定义 单行 文本 输入 框 。 

(2) name; 定义 文本 框 的 名 称 。 

(3) size: 文本 框 的 宽度 ,单位 为 单个 字符 的 宽度 。 
(4) maxlength: 定义 最 多 输入 的 字符 数 。 

(5) value: 定义 文本 框 的 初始 值 。 


3. 密码 框 


一 种 特殊 的 文本 框 ,用 于 输入 密码 。 当 输入 文字 时 ,文字 会 被 星 号 或 其 他 符号 代替 ,而 
输入 的 文字 会 被 隐藏 。 代 码 格式 : 


size- "" maxlength- "" value= " "> 


< input type = "password" name =" " size- " " maxlength- " "> 


属性 解释 : 

(1) type="password ": 定义 密码 框 。 

(2) name: 定义 密码 框 的 名 称 。 

(3) size: 定义 密码 框 的 宽度 ,单位 为 单个 字符 的 宽度 。 
(4) maxlength: 定义 最 多 输入 的 字符 数 。 

4. 多 行文 本 输入 框 


用 户 可 以 输入 多 行文 本 。 代 码 格式 : 


< textarea name =" " cols=" " rows - " " wrap=" "></textarea> 


属性 解释 : 

(1) name: 定义 多 行文 本 输入 框 的 名 称 。 

(2) cols、rows: 分 别 定义 多 行文 本 框 的 宽度 和 高 度 ,单位 为 单个 字符 的 宽度 。 
(3) wrap: 定义 输入 内 容 大 于 文本 框 时 显示 的 方式 。 


5. 隐藏 域 


隐藏 域 用 来 收集 或 发 送信 息 的 不 可 见 元 素 , 对 于 网 页 的 访问 者 来 说 ,隐藏 域 是 看 不 见 
的 。 当 表单 提交 时 ,隐藏 域 会 将 设置 的 信息 发 送 到 服务 器 上 。 代 码 格式 : 
< input type = "hidden" name=" " value=" "> 


属性 解释 : 
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(D type="hidden" : 定义 隐藏 域 。 
(2) name: 定义 隐藏 域 的 名 称 。 
(3) value; 定义 隐藏 域 的 值 。 


6. 单 选 按钮 
当 需 要 访问 者 在 待 选项 中 选择 唯一 的 答案 时 ,需要 用 到 单 选 框 。 代 码 格式 : 


< input type = "radio" name=" " value=" 


属性 解释 : 

(1) type="radio": 定义 单 选 按钮 。 
(2) name: 定义 单 选 按钮 的 名 称 。 
(3) value: 定义 单 选 按钮 的 值 。 


7. 复 选 框 


复 选 框 允许 在 待 选项 中 选中 一 个 以 上 的 选项 。 每 个 复 选 框 都 是 一 个 独立 的 元 素 , 都 必 
须 有 一 个 唯一 的 名 称 。 代 码 格 式 : 


> 


< input type = "checkbox" name =" " value=" ". 


属性 解释 : 

(D type="checkbox": 定义 复 选 框 。 
(2) name: 定义 复 选 框 名 称 。 

(3) value: 定义 复 选 框 的 值 。 


> 


8. 下 拉 列 表 框 
下 拉 选 择 框 允许 在 一 个 有 限 的 空间 设置 多 种 选项 。 代 码 格式 : 


<select name=" " size- " " multiple> 
selected >...</option> 


<option value= 


</select > 


属性 解释 : 

CD size 属性 : 定义 下 拉 列 表 框 的 行 数 。 

(2) name 属性 : 定义 下 拉 列 表 框 的 名 称 。 

(3) multiple 属性 : 表示 可 以 多 选 ,如 果 不 设置 本 属性 ,那么 只 能 单 选 。 
(4) value 属性 : 定义 选择 项 的 值 。 

(5) selected 属性 : 表示 默认 已 经 选择 本 选项 。 


9. 文本 上 传 框 


文件 上 传 框 看 上 去 和 其 他 文本 框 差不多 ,只 是 它 还 包含 一 个 “浏览 ”按钮 。 访 问 者 可 以 
通过 输入 需要 上 传 的 文件 的 路 径 或 者 单 击 “ 浏 览 ” 按 钮 选择 需要 上 传 的 文件 。 代 码 格式 : 
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«input type= "file" name-" " size-" " maxlength- " "> 


属性 解释 : 
(D type— "file"; 定义 文本 上 传 框 。 
(2) 其 他 属性 同文 本 框 。 


10. 提交 和 重 置 按钮 


1) 提交 按钮 
代码 格式 : 


< input type = "submit" name=".,." value="... " > 


属性 解释 : 

(D type= "submit"; 定义 提交 按钮 。 
(2) name 属性 : 定义 按钮 的 名 称 。 

(3) value 属性 : 定义 按钮 的 显示 文字 。 
2) 重 置 按 钮 

重 置 按钮 用 来 重 置 表单 。 代 码 格式 


< input type = "reset" name= "..." value="... 


属性 解释 : 

(D type "reset"; 定义 复位 按钮 。 
(2) name 属性 : 定义 按钮 的 名 称 。 

(3) value 属性 : 定义 按钮 的 显示 文字 。 
【 例 2.14】 注册 表单 实例 。 


<body> 
«hl > 用 户 注册 -- 请 填写 以 下 信息 </hl > 
< form name = "form1" method = "post" action=" "> 
< table width= "500" align="left" bgcolor = " # 83c4f6"> 
<tr> 
<td width = "120" height = "30"> 用 户 名 </td> 
<td>< input type = "text" name = "name" ></td> 
</tr> 
<tr> 
<td height = "30" > 用 户 密码 </td> 
<td>< input type = "password" name = "password"></td> 
</tr> 
«tr» 
<td height = "30" > 性 别 </td> 
<td>< input type = "radio" name = "sex" value = 





" checked = "true"»55 
< input type = "radio" name = "sex" value = " 女 "> 女 </td> 
</tr> 
«tr» 
<td height = "30"> 最 高 学 历 </td> 
<td> < select name = "select"> 
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< option > 请 选择 您 的 最 高 学 历 </option> 
< option > 高 中 </option> 
< option > 大 专 </option> 
<option > 本 科 </option> 
< option > 研究 生 </option> 
</select ></td> 
</tr> 
<tr> 
< td height = "30"> 最 感 兴趣 的 商品 </td> 
<td> 
< input type = "checkbox" name = "inst" value = "数码 产品 "> 数码 产品 
< input type = "checkbox" name =" inst " value = "服装 /服饰 时 尚 "> 服装 /服饰 时 尚 < br > 
< input type = "checkbox" name = "inst" value = "书籍 /音像 /游戏 "> 书籍 /音像 /游戏 
< input type = "checkbox" name = "inst" value = "家 居 / 家 电 / 礼 品 "> 家 居 / 家 电 / 礼 品 
<br> 
< input type = "checkbox" name = "inst" value = "珠宝 /手表 /眼镜 "> 珠宝 /手表 /眼镜 
</td> 
</tr> 
<tr> 
< td height = "30"> 自 我 介绍 </td> 
<td>< textarea name = "intro" rows = "5" cols = "45"></textarea ></td> 
</tr> 
<tr> 
<td height = "40" colspan = "2" align="center" > 
< input type = "submit" name = "buttonl" value = "注册 " /> &nbsp; 
< input type = "reset" name = "button2"value = " 重 置 " /> 
</td> 
</tr> 
</table> 
</form> 
</body> 


实例 效果 如 图 2. 14 所 示 。 


用 户 注册 一 请 填写 以 下 信息 





图 2. 14 表单 示例 


NY 
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2.3.11 多 媒体 标签 


在 网 页 中 应 用 的 多 媒体 主要 包括 音频 、 视 频 和 Flash 等 。 对 于 多 媒体 元 素 的 应 用 ,因为 
不 同 的 浏览 器 对 多 媒体 元 素 标签 的 支持 和 处 理 过 程 有 所 不 同 ,所 以 要 考虑 在 多 种 浏览 器 中 
的 显示 效果 可 能 不 同 。 


1. 背景 音乐 





HTML 中 插入 音频 文件 常用 的 格式 有 : MP3、WAV、MIDI 6$, <bgsound> bi 4& nf DJ 
将 声音 在 后 台 作 为 背景 音乐 播放 ,使 用 实例 : 二 bgsound src— "bgsound. mp3" loop=—1/>, 
其 中 ,loop 二 一 1 表示 无 限 循环 ,也 可 设置 具体 值 , 即 声 音 在 循环 播放 几 次 后 停止 。 注 意 : 
Firefox 和 Opera 浏览 器 中 不 支持 该 标签 。 

— embed fi & f£ IE、Firefox 和 Opera 浏览 器 中 都 可 以 正常 应 用 。 这 是 一 个 HTML5 
标签 ,在 HTMLA 中 是 非法 的 ,但 是 所 有 浏览 器 中 都 有 效 。 

<embed> by % (8 FAS (Al : 


< embed height = "100" width= "100" src = "song. mp3" autostart = "true" loop = "true"/> 

ih jd <embed> bg 4 EAS SER IL CHR ZH RG Ba EAS jp Fd ate JH np fn wal 
声音 的 播放 和 停止 。 

2. 动画 和 视频 


在 网 页 中 创建 视频 和 音频 的 方法 基本 相同 ,通过 二 embed 二 标签 可 以 在 网 页 中 播放 视 
频 或 动画 文件 。 常 用 的 视频 格式 有 MPG、WAV、RM 和 AVI, Flash 动画 文件 的 格式 为 
.swf。 下 面 的 HTML 代码 显示 嵌入 网 页 的 Flash 视频 : 

< embed src = "movie. swf" height = "200" width = "200"/> 

另外 一 种 方法 : n ARM <object > tr . 

<object> bs AE WEH EE HTML 页 面 中 嵌入 多 媒体 元 素 。 下 面 的 HTML 片段 显示 
和 骨 入 网 页 的 一 段 Flash 视频 : 

< object data = "movie. swf" height = "200" width = "200"/> 


下 面 的 代码 片段 能 够 显示 嵌入 网 页 中 的 MP3 文件 : 


< object height = "100" width = "100" data = "song. mp3"></object > 


2.3.12 thipS<div>5<span> 


<div> 5 <span> rid Eric AAR fb o BCR . h H style 属性 或 CSS 来 定义 ,不 过 
两 者 在 使 用 方法 上 存在 很 大 的 区 别 。 

div 全 称 division , 意 为 “区 分 ”, 是 用 来 为 HTML 文档 内 大 块 的 内 容 提供 结构 和 背景 的 
标签 。div 的 起 始 标签 和 结束 标签 之 间 的 所 包含 内 容 的 特性 由 二 div 二 标签 的 属性 来 控制 ， 
或 者 是 通过 使 用 样式 表 来 格式 化 div 的 起 始 标签 和 结束 标签 之 间 的 所 有 内 容 。div 标签 使 
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用 格式 : 
<div id= "value" align= "value" class = "value" style = "value"> 


属性 解释 : 

CD idi — div bs n , 常 与 CSS 样式 结合 ,实现 对 网 页 元 素 的 控制 。 

(2) aligns 用 于 控制 二 div 二 标签 中 的 元 素 的 对 齐 方式 ,其 值 可 以 是 left center right. 

(3) class: 用 于 设置 一 div 之 标签 中 的 元 素 的 样式 。 其 值 为 CSS 样式 中 的 class 选 
择 符 。 

先 定义 一 个 CSS 规则 : . font (font-size: larger} ,该 规则 定义 字体 样式 。 下 面 的 内 容 多 
次 使 用 到 同一 个 样式 表 *. font1”。 

«hl class- ".fontl "> Hl 标签 使 用 div 样式 </hl > 

<div class =". font1 "> DIV 标签 使 用 div 样式 </div> 

(4) style: 用 于 设置 二 div 之 标签 中 的 元 素 的 样式 。 其 值 为 CSS 属性 值 ,各 属性 值 应 用 
分 号 分 隔 。 


<div style = "width:100 % ;height:300px;font size:12pt "> 使 用 div 样式 </div> 


过 span 一 标签 和 所 div 之 标签 非常 类 似 。 可 以 作为 插入 CSS 这 类 风格 的 容器 。 但 div 
是 一 块 级 元 素 , 可 以 包含 段落 .标题 ,表格 等 。 而 span 标签 是 行内 元 素 ,span 的 前 后 是 不 会 
换行 的 , 它 没有 结构 意义 ,纯粹 是 应 用 样式 。 从 功能 角度 来 说 ,二 div 二 标签 一 般 用 来 作 布 
局 ,而 二 span 二 标签 用 来 制作 文字 的 效果 ,尤其 是 标题 和 链接 的 效果 ,例如 : 


<hl class =" ">< span» -- «/span» «/hl > 


一 div 过 … 一 /div 二 是 块 , 二 span 二 … 一 /span 二 是 行 , 块 里 可 以 含 行 , 即 div 块 里 可 以 有 
span 行 ,一 /div 之 显示 时 (分 块 结 束 处 ) ,系统 自动 换行 ,而 二 /span 二 不 换行 。 
【 例 2. 15】 <div> j span tr Sc [fil 


<html> 
< body> 
« p» div 标记 不 同行 : </p> 
<div>< img src=" img/picl. jpg" width= "60" height = "40"></div> 
<div>< img src=" img/picl. jpg" width= "60" height = "40"></div> 
<div>< img src=" img/picl. jpg" width= "60" height = "40"></div> 
<p> span 标记 同一 行 : </p> 
< span >< img src=" img/picl. jpg" width = "60" height = "40"» 四 Gi 标记 不 同行 ， 
</span > 
«span»« img src=" img/picl. jpg" width = "60" height = "40"> 
</span> 
<span >< img src=" img/picl. jpg" width = "60" height = "40"> 
</span> 
</body > 
</html> 





K 2.15 <div> <span> 
该 实例 在 浏览 器 中 的 显示 效果 如 图 2. 15 所 示 。 标签 区 别 
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过 div> 包 围 的 三 幅 图 像 被 自动 换行 分 在 不 同 的 三 行 中 ,而 所 span 之 标记 的 三 幅 图 像 没 
有 换行 。 


2.3.13 样式 标签 


CSS 是 Cascading Style Sheets 的 简称 ,中 文 翻译 为 “级 联 样式 表 ”, 也 有 人 翻译 为 “样式 
表 ”。 它 是 以 HTML 为 基础 的 语言 ,用 于 定义 网 页 中 内 容 的 格式 。 其 主要 特点 是 可 以 独立 
地 为 网 页 中 的 各 种 对 象 定义 格式 ,并 可 将 一 种 格式 用 于 多 个 网 页 。 

CSS 样式 可 以 将 许多 网 页 的 格式 同时 更 新 ,即将 站 点 上 所 有 的 网 页 都 使 用 一 个 CSS X 
件 进行 控制 ,只 要 修改 这 个 CSS 文件 中 相应 的 代码 ,那么 整个 站 点 的 所 有 页 面 都 会 随 之 发 
生变 动 ; 可 以 轻松 地 控制 页 面 的 布局 。 

当 浏 览 器 读 到 一 个 样式 表 , 它 就 会 按照 这 个 样式 表 来 对 文档 进行 格式 化 。 有 以 下 三 种 
方式 来 插入 样式 表 : 内 联 样式 、 内 部 样式 表 、 外 部 样式 表 。 


1. 内 联 样 式 











当 特 殊 的 样式 需要 应 用 到 个 别 元 素 时 ,就 可 以 使 用 内 联 样 式 。 使 用 内 联 样 式 的 方法 是 
在 相关 的 标签 中 使 用 样式 属性 。 样 式 属性 可 以 包含 任何 CSS 属性 。 代 码 格式 为 : 


< 标记 符 ”style = "property:valuel;property:value2; … property:value"> 


【 例 2.16】 使 用 内 联 样式 实例 。 








代码 如 下 。 
«hl style="font family: 楷 体 _gb2312; text - align:center; font - size:56px"> 
使 用 hl 样式 
</hl > 
<p style = "font - size:24px; text - align:center"> 
在 段落 标签 标记 符 中 直接 嵌 套 样式 
</p> 
<p> 该 段落 标签 没有 使 用 样式 </p> 
运行 效果 如 图 2. 16 所 示 。 
acer |B 
使 用 hl 样式 

在 段落 标签 标记 符 中 直接 嵌 套 样式 
RESEGSORIERNGS 

图 2. 16 使 用 内 联 样式 
2. 内 部 样式 表 


当 单 个 文件 需要 特别 样式 时 ,就 可 以 使 用 内 部 样式 表 。 可 以 在 head 部 分 通过 style 二 
标签 定义 内 部 样式 表 。 代 码 格式 为 : 


selector(property:valuel;property:value2; --- } 
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【 例 2.17】 内 部 样式 表 实 例 。 
代码 如 下 。 


<head><title> 在 STYLE 标记 符 中 定义 样式 信息 </title> 
«style» 
<! —— 
P{ font- size:44px; text - align:center; } 
H1{ font- family: {4 gb2312; text - align:center;color:red } 
-=--> 
</style> 
</head> 
< body> 
«H1 > 第 一 次 使 用 hl 样式 </H1 > 
«P» STYLE 标记 符 中 使 用 定义 样式 ,该 段落 使 用 样式 </P> 
<hr color = red> 
<Hl > 第 二 次 使 用 hl 样式 </H1 > 
</body> 


运行 效果 如 图 2. 17 所 示 。 
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第 一 次 使 用 hi 样式 
STYLE 标 记 符 中 使 用 定义 样式 , 该 段落 使 用 样式 


第 二 次 使 用 hl 样式 











图 2.17 使 用 内 部 样式 


3. 外 部 样式 表 


当 样 式 需 要 被 应 用 到 很 多 页 面 的 时 候 , 外 部 样式 表 将 是 理想 的 选择 。 使 用 外 部 样式 表 ， 
可 以 通过 更 改 一 个 文件 来 改变 整个 站 点 的 外 观 。 这 时 可 以 将 重复 在 多 个 网 页 中 使 用 的 样式 
放 在 外 部 样式 表 文 件 中 ,然后 通过 链接 的 方式 引用 其 中 的 样式 。 步 又 如 下 。 

1) 创建 外 部 样式 表 

将 样式 表 定义 放置 到 一 个 空白 的 文件 中 ,然后 将 文件 保存 为 后 缀 为 . ess 的 文件 。 

2) 在 网 页 中 引用 样式 

引用 样式 的 格式 为 : 


«link rel="stylesheet" type="text/css" href = "样式 表 文 件 "> 


[812.18] 外 部 样式 表 实 例 。 
CD 新 建 名 称 为 “mycss. css” 的 文件 ,文件 代码 如 下 。 


P(font- size:44px; text - align:center;color:blue } 
H1{ font- family: 楷 体 _gb2312; text- align:center; color:red} 


(2) 新 建 名 称 为 “样式 练习 (链接 外 部 样式 ). html” 的 文件 ,文件 中 代码 如 下 。 


<html> 
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< head >< title > 链接 外 部 样式 </title> 
«link rel = "stylesheet" type = "text/css" href = "nycss.css"» 
</head> 
<body> 
«hl > 第 一 次 使 用 hl 样式 </hl > 
<p> 链 接 外 部 样式 ,该 段落 标签 中 使 用 </p> 
<hr color = "red"> 
«hi > 第 二 次 使 用 hl 样式 </hl > 
</body> 
</html> 


运行 效果 如 图 2. 18 所 示 。 
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链接 外 部 样式 , 该 段落 标签 中 使 有 























第 二 次 使 用 hl 样式 


图 2.18 使 用 外 部 样式 表 


本 章 首先 介绍 了 HTML 的 基本 概念 ,通过 一 个 简单 的 HTML 实例 ,读者 可 以 了 解 
HTML 基本 结构 ,如 何 编写 HTML。 接 着 对 HTML 标签 的 概念 、 分 类 以 及 HTML 元 素 概 
念 做 简要 介绍 ,最 后 结合 实例 详细 介绍 了 HTML 标签 及 其 使 用 ,包括 HTML 文件 基本 标 
A ,标题 标签 .字体 标签 ,格式 控制 标签 ,图片 标签 ,链接 标签 .表格 标签 ,框架 标签 .列表 标 
签 .表单 标签 ,多 媒体 标签 . 块 标 签 .样式 标签 。 本 章 所 讲 的 HTML 基本 知识 基本 上 涵盖 了 
要 求 掌握 HTML 的 全 部 重要 内 容 。 

通过 本 章 的 学 习 , 读 者 能 够 掌握 最 基本 的 网 页 制作 技术 .为 后 面 学 习 动 态 网 页 知识 打下 
基础 。 


习题 


. 简 述 HTML 文档 的 基本 结构 。 

. 简 述 HTML 中 每 个 标签 的 含义 。 

. 利用 HTML 制作 一 个 每 隔 lmin 自动 刷新 的 网 页 。 

. 利用 HTML 制作 包含 不 同 超 链 接 的 网 页 。 

. 利用 HTML 制作 一 个 带 合并 单元 格 的 表格 网 页 。 

. 利用 HTML 制作 一 个 会 员 注 册 网 页 。 

- 利用 HTML 制作 一 个 带 嵌 套 的 框架 网 页 。 

. 利用 HTML 在 网 页 中 嵌入 不 同 的 多 媒体 元 素 ,例如 图 像 动 画 、 视 频 等 。 
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本 章 要 点 : 

。 Dreamweaver CS6 概述 ; 
。 站 点 的 创建 及 管理 ; 

t 制作 简单 网 页 ; 

。 创建 链接 ; 

。 其 他 的 一 些 网 页 元 素 ; 

。 表单 。 


Dreamweaver 是 目前 使 用 率 较 高 的 构建 网 站 的 专业 工具 , 它 提供 的 可 视 化 布局 .应 用 
程序 开发 等 诸多 功能 ,使 各 级 别 的 开发 者 都 能 快速 创建 网 站 。 本 章 主要 介绍 Dreamweaver 
CS6 的 基本 使 用 方法 。 


@.1 Dreamweaver CS6 概述 


Dreamweaver 是 美国 Macromedia 公司 开发 (后 被 Adobe 公司 收购 ) 的 集 网 页 制作 和 管 
理 网 站 于 一 身 的 所 见 即 所 得 的 网 页 编辑 器 。 
Dreamweaver CS6 相 较 之 前 的 版 本 ,增强 了 许多 新 的 功能 。 


1. 流体 网 格 布局 


使 用 基于 CSS3 的 自 适 应 网 格 版 面 系统 ,来 创建 跨 平台 和 跨 浏览 器 的 兼容 网 页 设计 。 
利用 简洁 、 业 界 标准 的 代码 为 各 种 不 同 设备 和 计算 机 开发 项 目 ,提高 工作 效率 。 它 可 直观 地 
创建 复杂 网 页 设计 和 页 面 版 面 ,无 须 忙于 编写 代码 。 


2. 改善 的 FTP 性 能 


利用 重新 改良 的 多 线程 FTP 传输 工具 节省 上 传 大 型 文件 的 时 间 ,更 快速 高 效 地 上 传 网 
站 文件 ,缩短 制作 时 间 。 


3. 增强 型 jQuery Mobile 支持 


使 用 更 新 的 jQuery Mobile 支持 为 iOS 和 Android 平台 建立 本 地 应 用 程序 。 建 立 触 及 
移动 受众 的 应 用 程序 ,同时 简化 开发 者 的 移动 开发 工作 流程 。 
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4. 更 新 的 PhoneGap 支持 


更 新 的 Adobe PhoneGap 支持 可 轻松 为 Android 和 iOS 建立 和 封装 本 地 应 用 程序 。 通 
过 改编 现 有 的 HTML 代码 来 创建 移动 应 用 程序 。 使 用 PhoneGap 模拟 器 检查 开发 者 的 
设计 。 

5. CSS3 转换 


将 CSS 属性 变化 制 成 动画 转换 效果 ,使 网 页 设计 棚 棚 如 生 。 在 处 理 网 页 元 素 和 创建 优 
美 效果 的 同时 保持 对 网 页 设计 的 精准 控制 。 


6. 更 新 的 实时 视图 


使 用 更 新 的 “实时 视图 ”功能 在 发 布 前 测试 页 面 。“ 实 时 视图 ? 现 已 使 用 最 新 版 的 
WebKit 转换 引擎 ,能 够 提供 绝 佳 的 HTML5 支持 。 


7. 更 新 的 多 屏幕 预览 面板 

利用 更 新 的 “多 屏幕 预览 ?面板 检查 智能 手机 ,平板 电脑 和 台式 计算 机 所 建立 项 目的 显 
示 夯 面 。 该 增强 型 面板 现在 能 够 让 开发 者 检查 HTML5 内 容 呈 

3.1.1 Dreamweaver CS6 的 工作 区 


选择 “开始 ”| 所 有 程序 | Adobe Dreamweaver CS6 命令 , 即 可 启动 Dreamweaver CS6 软件 。 

首次 启动 Dreamweaver CS6 时 ,会 弹出 “默认 编辑 器 ”对 话 框 ,用 户 可 根据 自己 的 需要 
和 喜好 设置 默认 的 编辑 器 。 然 后 单 击 “ 确 定 ” 按 钮 ,将 打开 Dreamweaver CS6 工作 区 的 开始 页 
面 ,如 图 3. 1 所 示 。 上 默认 情况 下 ,Dreamweaver CS6 的 工作 区 布局 是 以 “设计 ”视图 布局 的 。 
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图 3.1 Dreamweaver CS6 工作 区 的 开始 页 面 
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Dreamweaver CS6 工作 区 的 开始 页 面 由 以 下 三 列 组 成 。 

(1) 打开 最 近 的 项 目 : 此 栏 中 列 出 了 最 近 打 开 过 的 文件 列表 ,可 以 通过 双击 文件 快速 
将 其 打开 。 

(2) 新 建 : 此 栏 中 列 出 了 可 以 创建 的 新 文件 类 型 。 如 果 没 有 找到 需要 创建 的 文件 类 
型 ,可 以 单 击 下 方 的 “更 多 ”选项 , 调 出 更 多 可 创建 的 文件 类 型 。 

(3) 主要 功能 : 展示 了 Dreamweaver CS6 的 主要 功能 。 

在 开始 页 面 中 , 单 击 “ 新 建 ”| HTML 选项 ,将 打开 Dreamweaver CS6 的 工作 界面 ,如 
图 3.2 所 示 。 


菜单 栏 应 用 程序 栏 


插入 栏 
(插入 面板 ) Ex 





文档 窗口 











标 等 选择 器 








属性 检查 器 
fA 3.2 Dreamweaver CS6 的 工作 界面 


Dreamweaver CS6 的 工作 界面 主要 包括 * 应 用 程序 栏 "“ 菜 单 栏 "“ 插 入 栏 (插入 面板 )”、 
“文档 工具 栏 "“ 标 签 选 择 器 "“ 状 态 栏 "“ 属 性 检查 器 "“ 面 板 组 (标签 组 )”“ 文 档 窗口 ”。 

CD 应 用 程序 栏 : 主要 包含 一 个 工作 区 切换 器 ,方便 不 同 用 户 根据 个 人 的 使 用 习惯 选 
择 不 同 的 页 面 布局 ; Dreamweaver CS6 扩展 按钮 ; 一 个 站 点 管理 按钮 。 

(2) 菜单 栏 : 包含 10 项 主 菜单 ,几乎 涵盖 了 Dreamweaver CS6 中 的 所 有 功能 。 通 过 菜 
单 栏 的 使 用 可 以 对 对 象 进行 任意 的 操作 与 控制 。 菜 单 栏 按照 功能 的 不 同 进 行 了 相应 的 划 
分 ,使 用 户 在 使 用 的 时 候 能 够 更 方便 。 

(3) 插入 栏 : 主要 用 于 在 网 页 中 插入 各 种 网 页 元 素 ,如 文字 、 图 像 . 表 格 、 按 钮 .导航 以 
及 程序 等 。 

(4) 文档 工具 栏 : 通过 单 击 文档 工具 栏 中 的 各 种 视图 按钮 ,用 户 可 以 自由 地 在 不 同 的 
视图 之 间 快 速 切换 。 另 外 ,文档 工具 栏 还 包含 一 些 与 查看 文档 、 在 本 地 和 远程 站 点 间 传 输 文 
档 有 关 的 常用 命令 和 选项 。 

CO 标签 选择 器 : 位 于 文档 窗口 底部 的 状态 栏 中 ,用 于 显示 当前 选 定 对 象 HTML 标签 
的 层次 结构 。 单 击 该 层次 结构 中 的 任何 标签 ,就 可 以 选择 该 标签 及 其 全 部 内 容 ,不 过 标签 选 
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择 器 在 代码 视图 中 是 不 可 见 的 。 
(6) 状态 栏 : 其 作用 是 显示 当前 正在 编辑 文档 的 相关 信息 ,如 当前 窗口 大 小 、 文 档 大 小 
和 估计 下 载 时 间 等 。 


CD 属性 检查 器 : 通常 用 于 设置 和 查看 所 选 对 象 的 各 种 属性 ,位 于 窗口 底部 。 单 击 “ 属 
性 ”标题 栏 可 展开 或 折 生 “属性 ”面板 。 该 面板 中 显示 的 属性 通常 对 应 标签 的 属性 ,更 改 属性 
通常 与 在 代码 视图 中 更 改 相应 的 属性 具有 相同 的 效果 。 

(8) 面板 组 : 为 使 设计 界面 更 加 简洁 ,同时 也 为 了 获得 更 大 的 操作 空间 ,Dreamweaver 
CS6 中 将 类 型 相同 或 功能 相近 的 面板 分 别 组 织 到 不 同 的 面板 下 ,再 将 这 些 面 板 组 织 在 一 起 ， 
构成 面板 组 。 面 板 组 中 的 面板 都 是 折 释 的 , 单 击 标题 左 角 处 的 展开 箭头 可 以 折 双 或 展开 面 
板 , 并 且 可 以 和 其 他 面板 组 停靠 在 一 起 。 面 板 组 还 可 以 停靠 到 集成 的 应 用 程序 窗口 中 。 

(9) 文档 窗口 : 即 设计 区 ,是 Dreamweaver CS6 进行 可 视 化 编辑 网 页 的 主要 区 域 , 可 以 
显示 当前 文档 的 所 有 操作 效果 ,如 插入 文本 图像 .动画 等 。 


3.1.2 Dreamweaver CS6 的 插入 栏 


插入 栏 位 于 菜单 栏 和 文档 工具 栏 的 中 间 , 它 涵盖 了 在 设计 网 页 时 最 常用 的 项 目 , 就 好 像 
在 绘画 调 色 时 使 用 的 三 原色 一 样 。 在 择 入 栏 中 包含 用 于 创建 和 插入 对 象 ( 如 表格 、AP Div 
和 图 像 ) 的 按钮 ,而 这 些 按 钮 则 又 被 组 织 到 各 个 选项 卡 中 ,如 图 3. 3 所 示 。 
RA 
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图 3.3 AR 





插入 栏 被 分 为 独立 的 对 象 类 别 : 常用 \ 布 局 .表单 数据 .Spry\InContext Editing, 文本 、 
收藏 夹 。 


1.“ 常 用 "选项 卡 

如 图 3.3 所 示 ,其 中 为 用 户 准备 了 最 常用 的 插入 对 象 ,如 表格 、 图 像 。 

2.“ 布 局 "选项 卡 

如 图 3.4 Bros ,用 于 处 理 表格 .DIV 标签 .AP Div 和 框架 ,通过 这 些 对 象 可 以 定义 页 面 
布局 。Dreamweaver CS6 提供 了 两 种 方式 来 使 用 表格 ,分 别 是 标准 视图 和 扩展 视图 。 另 
外 ,还 可 以 进行 单元 格 的 布局 和 表格 的 布局 。 
BM NA 表单 (NOE sprr |insertbaz/caterory/ice | XÆ AR | — 
car M= EE 


3.4 “布局 ”选项 卡 








3.“ 表 单 ” 选 项 卡 
如 图 3.5 所 示 , 它 是 实现 HTML 互动 性 的 一 个 主要 方式 。“ 表 单 ” 选 项 卡 中 为 用 户 提 
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供 了 用 来 创建 基于 网 页 表单 的 基本 构建 块 。 
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图 3. 5 “表单 ”选项 卡 


4.“ 数 据 "选项 卡 
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图 3.6 “数据 ?选项 卡 

5. Spry 选项 卡 


如 图 3.7 所 示 ,Spry 选项 卡 是 一 个 JavaScript 库 , 网 页 设计 人 员 使 用 它 可 以 创建 能 为 站 
点 访问 者 提供 更 多 丰富 体验 的 网 页 。 在 Dreamweaver CS6 中 ,又 新 增 了 包括 XML 驱动 的 
列表 和 表格 . 折 释 构件 .选项 卡 式 面板 `.Spry 工具 提示 等 元 素 。 





Spry 
lacianiaa s Gsm Sm 
图 3.7 Spry 选项 卡 


6. InContext Editing 选项 卡 


如 图 3. 8 所 示 ,InContext Editing 是 Dreamweaver CS6 新 增 的 用 户 界面 对 象 ,包含 供 
生成 InContext 编辑 页 面 的 按钮 ,分 别 是 创建 重复 区 域 .创建 可 编辑 区 域 .管理 可 用 的 CSS 
类 。 通 过 该 功能 ,网 页 设计 人 员 不 但 可 以 维护 其 站 点 设计 的 完整 性 ,同时 还 允许 客户 处 理 他 
们 自己 的 更 新 。 


IT 


3.8 InContext Editing 选项 卡 


7.“ 文 本 ”选项 卡 


如 图 3. 9 所 示 ,该 选项 卡 包 含 最 常用 的 文本 格式 HTML 标签 ,如 强调 文本 、 改 变 文本 
字体 或 创建 项 目 列 表 所 需要 的 选项 。 文 本 类 别 包 含 一 个 字符 按钮 和 一 些 特殊 字符 ,还 包含 
可 以 插入 换行 符 和 不 间断 空格 的 对 象 。 
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图 3.9 “文本 ”选项 卡 


8.“ 收 藏 夹 "选项 卡 
用 户 可 以 从 插入 栏 中 选择 自己 常用 的 工具 放 入 其 中 ,以 提高 工作 效率 。 


8.2 站 点 的 创建 及 管理 


3.2.1 站 点 概述 


站 点 是 一 种 管理 网 站 中 所 有 相关 联 文 档 的 工具 ,通过 站 点 可 以 实现 将 文件 上 传 到 网 络 
服务 器 ,自动 跟踪 和 维护 ,管理 文件 以 及 共享 文件 等 功能 。 严 格 来 说 ,站 点 也 是 一 种 文档 的 
组 织 形式 ,由 文档 和 文档 所 在 的 文件 夹 组 成 ,不 同 的 文件 夹 保 存 不 同 的 网 页 内 容 , 如 images 
文件 夹 用 于 存放 图 片 ,这 样 便于 以 后 的 管理 与 更 新 。 

Dreamweaver 中 的 站 点 包括 本 地 站 点 、 远 程 站 点 与 测试 站 点 。 本 地 站 点 是 用 来 存放 整 
个 网 站 框架 的 本 地 文件 夹 , 是 用 户 的 工作 目录 ,一 般 制作 网 页 时 只 需要 建立 本 地 站 点 即 可 。 
远程 站 点 是 存储 于 Internet 服务 器 上 的 站 点 和 相关 文档 。 通 常情 况 下 ,为 了 不 连接 
Internet 而 对 所 建 的 站 点 进行 测试 ,可 以 在 本 地 计算 机 上 创建 远程 站 点 ,来 模拟 真实 的 Web 
服务 器 进行 测试 。 测 试 站 点 是 Dreamweaver 处 理 动态 页 面 的 文件 夹 , 使 用 此 文件 夹 生 成 动 
态 内 容 并 在 工作 时 连接 到 数据 库 , 用 于 对 动态 页 面 进行 测试 。 


3.2.2 创建 本 地 站 点 


创建 站 点 是 制作 网 站 的 第 一 步 ,可 以 更 好 地 利用 站 点 窗口 对 站 点 文件 进行 管理 ,也 可 以 
尽 可 能 地 减少 错误 的 出 现 。 在 定义 站 点 的 过 程 中 ,文件 夹 的 命名 尤为 重要 ,不 能 用 中 文 , 否 
则 会 在 上 传 网 站 时 带 来 许多 不 必要 的 麻烦 。 

创建 本 地 站 点 时 ,首先 要 在 本 地 计算 机 的 磁盘 中 建立 相应 的 物理 目录 ( 即 指定 文件 夹 )。 
例如 ,在 本 地 计算 机 的 本 地 磁盘 (E: ) 中 创建 好 一 个 Mysit 文件 夹 ,在 其 中 再 创建 相应 的 
images music, flash 等 子 文件 夹 。 建 立 好 目录 后 , 即 可 用 该 目录 作为 Dreamweaver 站 点 的 
本 地 根 文件 夹 。 


1. 使 用 站 点 向 导 创 建站 点 


使 用 站 点 定义 向 导 可 以 带领 用 户 逐 步 完 成 站 点 的 设置 操作 ,这 种 创建 方法 适合 于 初 
学 者 。 
在 菜单 栏 执行 “站 点 ”|1“ 新 建站 点 ”命令 ,在 打开 的 “定义 站 点 ”对 话 框 中 ,用 户 可 以 在 “ 基 
本 ”选项 卡 和 “高 级 ”选项 卡 中 任意 选择 一 种 来 填写 。“ 基 本 ”选项 卡 可 以 指导 用 户 一 步 一 步 
地 完成 站 点 的 设置 。“ 高 级 ”选项 卡 则 比较 适用 于 对 Dreamweaver 比较 熟悉 的 用 户 , 使 用 
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“高 级 ”选项 卡 就 没有 了 站 点 定义 向 导 , 完 全 按照 用 户 自己 的 意愿 进行 。 
在 这 里 先 使 用 “基本 ”选项 卡 ,如 图 3. 10 所 示 。 
未 命名 站 点 2 的 站 点 定义 为 
Et [mg | 
站 点 定义 


quet fist 





Dreamweaver 中 的 站 点 是 文件 和 文件 来 的 集合 ， 它 对 应 于 服务 器 上 的 Yeb 站 点 。 
您 打算 为 您 的 站 点 起 什么 名 宇 ? 
Eazio] | 


示例 ;MySite 

您 的 站 点 的 JITP 地 址 CURL) 是 什么 ? 

ep:7/ ] 
ARP; http://www. nylost. con/nySi te. 


Fence Hrs EBEN e T T = 

















图 3.10 新 建站 点 


在 “您 打算 为 您 的 站 点 起 什么 名 字 ?” 的 问题 下 面 输入 这 个 站 点 的 名 称 。 默 认 情况 下 名 
字 为 “未 命名 站 点 1”“ 未 命名 站 点 2” eee eee ,可 以 根据 需要 来 设置 自己 的 站 点 名 称 ,也 可 以 暂 
时 不 设置 ,在 以 后 “管理 站 点 "时 再 次 修改 站 点 名 称 。 这 里 输入 站 点 名 称 "“mysit”。 

然后 单 击 * 下 一 步 ?按钮 ,弹出 如 图 3. 11 所 示 对 话 框 。 在 该 对 话 框 中 会 询问 是 否 使 用 服 
务 器 技术 。 如 果 选 择 “ 是 ,我 想 使 用 服务 器 技术 ”, 那 么 会 在 下 面 多 出 来 一 个 服务 器 种 类 选择 
的 项 目 ,在 这 里 可 以 选择 合适 的 服务 器 。 如 果 当 前 用 户 建立 的 站 点 暂时 不 使 用 Web 应 用 程 
Ý ,建议 在 这 一 步 中 不 要 选择 使 用 服务 器 技术 。 现 在 要 建立 的 是 静态 站 点 , 故 选择 “和 否 ,我 不 
想 使 用 服务 器 技术 ”选项 。 

继续 单 击 “ 下 一 步 "按钮 ,又 会 弹出 一 个 对 话 框 ,如 图 3. 12 所 示 。 在 一 般 情况 下 ,制作 好 
的 网 站 都 要 上 传 到 网 络 上 , 供 浏 览 者 浏览 。 但 上 传 到 网 络 上 还 需要 虚拟 主页 的 空间 ,所 以 一 
般 是 先 在 本 地 制作 网 站 ,最 后 上 传 给 服务 器 。 这 里 选择 “编辑 我 的 计算 机 上 的 本 地 副本 , 完 
成 后 再 上 传 到 服务 器 (推荐 )”, 接 着 再 为 mysit 站 点 找 一 个 本 地 根 文件 夹 。 

注意 : 创建 本 地 站 点 时 ,首先 应 在 本 地 计算 机 的 磁盘 中 建立 相应 的 物理 目录 ( 即 指定 文 
WRK). 

例如 ,在 本 地 计算 机 的 本 地 磁盘 (E:) 中 创建 mysit 文件 夹 , 在 此 文件 夹 中 再 创建 子 文件 
3€ images 用 来 存放 网 站 制作 中 相关 的 图 像 。 建立 好 目录 后 , 即 可 用 该 目录 作为 
Dreamweaver 站 点 的 本 地 根 文件 夹 。 

继续 单 击 “下 一 步 ? 按 钮 。 在 这 个 对 话 框 中 可 以 在 “您 如 何 连接 到 远程 服务 器 ?" 下 拉 选 
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AN 


未 命名 站 点 2 的 站 点 定义 为 


你 是 否 打算 使 用 服务 器 技术 ,如 ColdFusion. ASP.NET. ASP. JSP 或 PHP? 


OF ,我 不 想 使 用 服务 器 技术 。@) 
名 是 ， 我 想 使 用 服务 器 技术 。 M 


到 和 服务 器 技术 ? © 


pun 
ASP JavaScript 








《上 一 步 @) EE QD > 








图 3.11 是 否 使 用 服务 器 


未 命名 站 点 2 的 站 点 定义 


SX. 3 部 分 


在 开发 过 程 中 您 打算 如 何 使 用 您 的 文件 ? 


C 编辑 我 的 计算 机 上 的 本 地 副本 ,完成 后 再 上 传 到 服务 器 (推荐) 和 E) 
加 使用 本 地 网 络 直接 在 服务 器 上 进行 编辑 0) 


您 格 把 文件 存储 在 计算 机 上 的 什么 位 置 ? 

















[区 上 一 步 四 ] Fee a> 














图 3. 12 是否 上 传 服务 器 
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项 中 设置 连接 远程 服务 器 的 方法 ,如 图 3. 13 所 示 。 由 于 上 一 步 已 经 设 定 了 和 暂时 不 连接 服务 
器 , 故 这 里 也 选择 * 本 地 /网 络 ", 即 现在 仅 在 本 地 计算 机 上 进行 制作 。 完 成 后 可 以 再 次 设置 
服务 器 连接 方式 。 
未 命名 站 点 2 的 站 点 定义 为 
[E au] 
站 点 定义 Ji 


共享 文件 





您 如 何 连 接 到 远程 服务 器 ? 
无 


FTP 
本 地 /网 络 
WebDAV 





Microsoft Visual SourceSafe R) 





Ga ES 











图 3.13 ”如何 连 接 远 程 服务 器 


完成 后 单 击 “ 下 一 步 ” 按 钮 ,接着 会 弹出 “总 结 ” 对 话 框 ,如 图 3. 14 所 示 。 显 示 当 前 创建 
的 这 个 站 点 的 本 地 信息 ,测试 服务 器 的 类 型 等 。 在 这 个 对 话 框 中 不 需要 进行 任何 选择 , 单 击 
“完成 ”按钮 ,这 个 站 点 的 初始 化 工作 就 完成 了 。 


2. 使 用 “高 级 "选项 卡 创建 站 点 


使 用 站 点 向 导 定 义 站 点 主要 是 针对 初学 者 ,而 对 熟悉 Dreamweaver 的 人 来 说 ,一 般 都 
采用 “高 级 ”选项 卡 创建 站 点 。 

首先 在 菜单 栏 上 执行 “站 点 ”1“ 管 理 站 点 ”命令 ,或 者 单 击 “ 文 件 ” 面 板 中 的 “站 点 "下拉 列 
表 , 从 中 选择 “管理 站 点 "项 。 同 样 ,在 Dreamweaver CS6 界面 中 ,可 以 直接 单 击 程序 栏 上 新 
增 的 喝 图 标 , 在 弹出 菜单 中 选择 “管理 站 点 ”选项 。 在 “管理 站 点 ”对 话 框 中 单 击 “ 新 建 "按钮 ， 
选择 “站 点 ”选项 后 会 弹出 一 个 如 图 3. 15 所 示 的 对 话 框 ,在 该 对 话 框 中 选择 “高 级 ”选项 卡 。 

在 这 个 选项 卡 中 输入 用 户 的 站 点 名 称 “mysit” ,接着 设置 本 地 根 文件 夹 和 默认 图 像 文件 
夹 , 其 他 的 选项 和 设置 使 用 默认 即 可 。 

除了 确定 本 地 站 点 根 目录 ,如 果 还 需要 使 用 和 远程 站 点 有 关 的 信息 ,可 以 在 “分 类 ” 栏 中 
选择 “远程 信息 ”项 ,如 图 3. 16 所 示 。 在 它 的 选项 中 包括 FTP、 本 地 /网 络 、 WebDAV 和 
RDS 等 设置 。 

然后 在 “高 级 ”选项 卡 左边 的 “分 类 ? 栏 中 选择 “测试 服务 器 ?选项 ,如 图 3. 17 所 示 。 对 “ 服 
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x 


名 站 点 2 的 站 点 定义 为 


您 的 站 点 包含 以 下 设置 


本 地 信息 : 《 将 创建 本 地 根 文件 夹 》 
站 点 名 称 : 未 命名 站 点 2 
HMB: C:\Documents and Settings\kdninistrator\ 旧 面 \ 未 命名 站 点 2\ 


远程 信息 
WA: 我 格 在 以 后 完成 此 设置 。 


测试 服务 器 : 
访问 ; 我 格 在 以 后 完成 此 设置 。 


可 以 使 用 高 级 ' 选项 卡 对 您 的 站 点 进行 进一步 配置 。 























图 3.14 “总 结 ?对 话 框 


ASM: [aynit 
SHIRA QD 


Contribute " 
默认 图 像 文件 夹 IL); [C:\Documents and Settings\Adnini strato] 


链接 相对 于 : OKB 〇 站 点 根 目录 (8) 
HTTP 地 址 00 E ti 


SI ME. PE EE 
用 您 的 站 点 的 HTTP 链 


Spry 


区 分 大 小 写 的 链接 : [7] 使 用 区 分 大 小 写 的 链接 检查 QD 
SF: BREF E) 





arie 站 点 资源 和 文件 信息 ,这 将 加 
, 链接 答 理 和 站 点 地 图 特性 。 


























图 3.15 建立 站 点 


mysit 的 站 点 定义 为 
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E 
eg 


| 设计 每 注 
文件 视图 列 


[Contribute 
模板 


[Spry 














aysit 的 站 点 定义 为 

基本 | 高 级 
BR 

ERR 

| 版 本 控制 

| Re P" 

Sisi, 

(Contribute 
i 


| 模 : 
Spry 

















远程 信息 








RDS 
Microsoft Visual SourceSafe (R) 





图 3.16 “远程 信息 ”选项 卡 


DII 





RD: 
Microsoft Visual SourceSafe R) 











图 3.17 测试 服务 器 选项 卡 
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务 器 模型 ”选项 的 设置 也 和 之 前 选择 服务 器 一 样 ,在 这 里 暂时 选择 “无 "。 在 “访问 ”选项 中 选 
择 “ 本 地 /网 络 ”"。 在 “URL 前 级 ”文本 框 中 .输入 测试 服务 器 上 根 文件 夹 的 HTTP 地 址 。 如 
果 在 本 地 计算 机 上 工作 ,URL 前 组 是 以 http://localhost/ 开 始 。 最 后 , 单 击 “ 确 定 ” 按 钮 ,站 
点 创建 完毕 。 


3.2.3 管理 站 点 


设置 好 站 点 后 ,可 以 对 本 地 站 点 进行 多 方面 的 管理 ,如 打开 站 点 ,编辑 站 点 、 删 除 站 点 及 
复制 站 点 等 。 


在 菜单 栏 中 选择 “站 点 ”1“ 管 理 站 点 "命令 ,打开 “ 管 
理 站 点 ”对 话 框 ,如 图 3. 18 所 示 。 

在 该 对 话 框 中 选择 需要 修改 的 站 点 ,然后 单 击 “ 编 
辑 ” 按 钮 ,之 后 会 再 次 打开 相关 站 点 的 定义 对 话 框 ,此 时 
可 以 对 站 点 信息 进行 编辑 ,编辑 站 点 的 过 程 与 新 建站 点 
相同 ,如 图 3. 19 所 示 。 

在 制作 网 站 过 程 中 ,如 果 仅 需要 更 改 某 个 站 点 里 的 
部 分 页 面 内 容 , 而 不 破坏 原 站 点 内 容 时 ,可 以 先 将 该 站 
点 复制 出 来 ,然后 在 该 站 点 的 副本 上 修改 。 单 击 “ 复 制 ” 
按钮 ,在 “管理 站 点 ”对 话 框 中 会 直接 出 现 该 站 点 的 副 
本 ,如 图 3.20 所 示 。 






































图 3.18 “管理 站 点 ”对 话 框 


mysit 的 站 点 定义 为 


本 地 信息 


站 点 名 称 0D ; [mysit 


本 地 根 文件 夹 FE); [C:\Documents and Settings MAdministrato] (C 


Contribute 
SUBIR C): [C:\Documents and Settings \Adnini strato 
链接 相对 于 : OxtQ 人 〇 站 点 根 目录 G) 
MrT HERE QD: [heep:// 


[T CHIP DITE 
ean sido iTE Gb 


Spry 








区 分 大 小 写 的 链接 ; [7] 使 用 区 分 大 小 写 的 链接 检查 Q) 
SF: venis 到 ) 


本" 
































图 3. 19 编辑 站 点 
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3.20 “管理 站 点 ”对话 框 


一 个 项 目 中 的 任务 结束 后 ,可 以 从 列表 上 删除 站 点 。 在 “管理 站 点 ”对 话 框 中 ,选择 要 删 
除 的 站 点 ,然后 单 击 “ 删 除 ” 按 钮 即 可 。 需 要 注意 的 是 ,删除 站 点 只 是 把 站 点 从 Dreamweaver 
的 内 部 站 点 列表 上 删除 ,并 没有 从 硬盘 上 真正 删除 任何 的 文件 或 文件 夹 。 以 后 如 果 有 需要 ， 


还 可 以 再 次 将 其 设置 为 站 点 。 


删除 站 点 之 前 ,需要 把 站 点 设置 导出 ,用 户 可 以 在 “管理 站 点 ”对 话 框 中 单 击 “ 导 出 ” 按 
钮 ,会 出 现 “ 导 出 站 点 ”对 话 框 ,如 图 3. 21 所 示 。 选 择 合适 的 保存 目录 ,然后 单 击 “ 保 存 ” 按 
钮 , 即 可 完成 站 点 的 导出 。 导 出 后 的 文件 保存 了 所 有 的 链接 信息 ,并 能 够 在 以 后 通过 “管理 


站 点 ”对 话 框 中 的 “导入 ”按钮 再 次 将 其 导入 。 
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图 3. 21 “导出 站 点 "对话 框 


不 管 是 新 建 、 复 制 、 删 除 `. 导 入 还 是 导出 站 点 ,完成 操作 后 单 击 * 完 成 ”按钮 会 自动 关闭 


“管理 站 点 "对话 框 。 
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8.3 制作 简单 网 页 


浏览 网 页 时 ,通过 文本 和 图 像 获取 信息 是 最 直接 的 方式 。 文 本 是 基本 的 信息 载体 ,不 管 
网 页 内 容 如 何 丰 富 ,文本 始终 都 是 网 页 中 最 基本 的 元 素 。 而 图 像 使 得 网 页 的 内 容 更 加 丰富 
多 彩 ,形象 生动 。 人 掌握 好 文本 和 图 像 的 使 用 方法 是 设计 制作 网 页 的 基本 能 力 。 


3.3.1 文档 的 基本 操作 


1. 创建 空白 文档 


制作 网 页 应 该 从 创建 空白 文档 开始 。 创 建 空白 文档 的 具体 步骤 如 下 。 
CD 选择 “文件 ”1“ 新 建 " 菜 单 命令 ,打开 “新 建文 档 ” 对 话 框 ,如 图 3. 22 所 示 。 
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3.22 “新 建文 档 " 对 话 框 


(2) 选择 “空白 页 ”选项 ,在 “页 面 类 型 "列表 中 选择 HTML 选项 ,在 右 侧 列表 框 中 选择 
“无 ?选项 。 
G) 单 击 “创建 按钮 , 即 可 创建 一 个 空白 文档 。 


2. 页 面 属性 设置 


创建 空白 文档 后 ,要 对 文件 进行 页 面 属 性 的 设置 ,也 就 是 设置 整个 网 站 页 面 的 外 观 效 
果 。 选 择 “ 修 改 ”1“ 页 面 属性 ”菜单 命令 ,或 按 Ctrl 十 ] 组 合 键 ,打开 “页 面 属性 ”对 话 框 ,从 中 
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可 以 设 秆 外观、 链接、 标题、 标题 /编码 和 跟踪 图 像 等 属性 ,如 图 3. 23 所 示 。 
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图 3.23 设置 页 面 属性 


3.3.2 文本 及 文本 属性 设置 
网 页 中 ,文本 是 基本 的 信息 载体 ,是 网 页 中 最 基本 的 元 素 之 一 。 
1. 插入 文本 


CD 将 光标 放置 在 文件 窗口 中 ,输入 文字 。 

(2) 选择 “文件 ”1“ 另 存 为 ”菜单 命令 ,弹出 “另存 为 "对话 框 。 在 “保存 在 ”下 拉 列 表 中 选 
择 文件 要 保存 的 路 径 , 在 “文件 名 ”文本 框 中 输入 文件 名 ,在 “保存 类 型 "下 拉 列 表 中 选择 
"HTML 文档 ”选项 , 单 击 “ 保 存 ” 按 钮 保存 文件 。 

(3) 按 F12 键 在 浏览 器 中 预览 效果 。 

注意 : 在 输入 文本 的 过 程 中 ,换行 时 如 果 直 接 按 Enter 键 , 行 间距 会 比较 大 。 一 般 情况 
下 ,在 网 页 中 换行 时 按 Shift 十 Enter 组 合 键 ,这 样 才 是 正常 的 行距 。 


2. 文本 属性 的 设置 


1) 设置 文本 标题 

首先 在 文件 窗口 中 选中 要 设置 标题 的 文字 ,然后 在 菜单 栏 中 执行 “修改 ”1“ 页 面 属性 ” 命 
令 , 打 开 “ 页 面 属性 ”对 话 框 。 

选择 “分 类 ” 栏 里 的 “标题 (CSS) ”选项 ,在 标题 的 设置 项 中 可 以 看 到 ,文本 标题 的 设置 共 
有 6 个 级 别 , 如 图 3. 24 所 示 。 

在 对 这 些 标 题 进行 设置 时 ,每 个 标题 的 字体 大 小 和 颜色 都 可 以 单独 设置 。 需 要 对 所 有 
标题 设置 字体 类 型 。 通 常情 况 下 “标题 字体 ?列表 中 会 为 用 户 列 出 一 些 默认 的 字体 ,如 果 这 
些 字体 中 没有 需要 的 字体 ,可 以 在 “标题 字体 ”下拉 列表 中 选择 最 下 面 的 “编辑 字体 列表 ”, 进 
而 在 “编辑 字体 列表 ”对 话 框 中 添加 或 删除 字体 类 型 ,如 图 3. 25 所 示 。 

首先 在 “可 用 字体 ”中 选择 字体 ,接着 单 击 “ 添 加 ”按钮 。 这 样 就 可 以 将 选中 的 字体 添加 
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图 3.24 设置 标题 属性 
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3.25 “编辑 字体 列表 ”对 话 框 


到 标题 字体 中 。 当 然 , 在 字体 列表 中 还 可 以 对 当前 已 有 的 字体 进行 添加 或 删除 ,只 需 单 击 字 
体 列表 左上 角 的 “加 号 ”和 *“ 减 号 ”按钮 就 可 以 管理 字体 。 要 注意 的 是 ,每 次 从 可 选 字体 中 添 
加 字体 只 能 添加 一 个 ; 如 果 超 过 了 一 个 ,那么 超出 的 字体 将 和 第 一 个 添加 的 字体 列 在 同一 
项 中 。 

注意 : 用 户 在 添加 字体 类 型 的 时 候 , 最 好 使 用 宋体 、 楷 体 、 仿 宋 和 黑体 这 4 种 常用 字体 。 
如 果 使 用 一 些 不 常用 的 字体 , 当 网 页 在 用 户 端 显示 时 ,如 果 用 户 端的 字体 库 中 没有 当前 字 
体 , 那 么 将 无 法 正常 显示 。 

2) 添加 空格 

默认 状态 下 ,Dreamweaver CS6 中 不 能 连续 输入 多 个 空格 ,只 能 输入 一 个 ,继续 按 空格 
键 光 标 将 不 会 再 向 后 移动 。 如 果 想 要 连续 输入 多 个 空格 ,方法 很 多 ,最 简单 的 就 是 将 输入 法 
提示 框 上 的 “半角 ? 改 为 “全 角 ”。 或 者 按 Shift 十 Ctrl 十 Space 组 合 键 增加 连续 空格 。 

3) 在 属性 检查 器 中 编辑 CSS 规则 

在 属性 检查 器 中 ,开发 人 员 用 两 个 标签 将 HTML 格式 和 CSS 格式 完全 分 开 , 设 计 者 可 
以 有 选择 地 设置 文本 属性 。 当 单 击 HTML 格式 时 ,属性 面板 中 呈现 与 HTML 相关 的 选 
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项 ,设置 完成 后 ,Dreamweaver 会 将 属性 添加 到 页 面 正文 的 HTML 代码 中 。 同 样 ,如 果 应 
用 了 CSS 格式 ,Dreamweaver 就 会 将 属性 写 入 文档 头 或 单独 的 样式 表 中 。 

首先 在 文档 窗口 中 选 定 要 进行 设置 的 文本 。 然 后 打开 “属性 ”窗口 (通过 执行 菜单 命令 
“窗口 ”1“ 属 性 ”或 者 按 Ctrl 十 F3 快捷 键 ) , 单 击 CSS 按钮 ,如 图 3. 26 所 示 。 

















图 3.26 CSS 属 性 


“目标 规则 ”: 是 指 在 CSS 属性 检查 器 中 正在 编辑 的 规则 。 当 文本 已 应 用 了 样式 规则 
时 ,在 页 面 的 文本 内 部 单 击 ,将 会 显示 出 影响 该 文本 格式 的 规则 。 如 果 要 创建 新 规则 ,在 “ 目 
标 规则 ”下 拉 列 表 中 选择 “新 CSS 规则 ”, 完 成 新 建 CSS 规则 。 

“编辑 规则 ”按钮 : 用 以 打开 目标 规则 的 “CSS 规则 定义 ”对 话 框 。 

“字体 ”: 更 改 目 标 规 则 的 字体 。 

“大 小 ”: 设置 目标 规则 的 字体 大 小 。 

文本 颜色 : 可 以 将 所 选 颜色 设 为 目标 规则 的 字体 颜色 。 可 以 通过 单 击 颜色 框 选 择 Web 
安全 色 ,或 在 相 邻 的 文本 字段 中 输入 颜色 值 。 

粗 体 : 用 于 给 目标 规则 添加 粗 体 属性 。 

斜体 : 用 于 给 目标 规则 添加 斜体 属性 。 

“ 左 对 齐 、 居 中 对 齐 和 右 对 齐 ”: 用 来 设置 目标 规则 的 各 种 对 齐 属 性 。 

4) 在 属性 检查 器 中 设置 HTML 格式 

选择 要 设置 格式 的 文本 ,打开 属性 检查 器 , 单 击 HTML 按钮 。 设 置 要 应 用 于 所 选 文本 
的 选项 ,如 图 3. 27 所 示 。 











E23] " [V] om -WW UN ess S KT Wieda OFS) 
[oc] | MO (E) Rx - BY FEE GEO) © 
be è mm x + Wo -90 Bo i e) 
D CARM- ^8 | 


图 3.27 HTML 属性 


“格式 ”: 用 于 设置 所 选 文本 的 段落 样式 。 

ID; 用 于 为 所 选 内 容 分 配 ID, 以 表示 其 唯一 性 。ID 默认 情况 下 为 无 ,如 果 适 用 ,下 拉 列 
表 中 将 列 出 文档 内 所 有 未 适用 的 已 声明 ID. 

“类 ”: 用 于 显示 当前 应 用 于 所 选 文本 的 类 样式 。 如 果 没 有 对 所 选 内 容 应 用 过 任何 样 
式 , 则 显示 无 。 如 果 对 所 选 内 容 应 用 了 样式 , 则 下 拉 列 表 中 会 显示 出 应 用 于 该 文本 的 样式 。 

项 目 列表 : 用 于 为 所 选 文本 创建 项 目 列表 。 又 被 称 为 无 序列 表 , 有 方形 .空心 圆 形 和 实 
心 圆 形 三 种 表示 标记 方式 。 

编号 列表 : 用 于 为 所 选 文本 创建 编号 列表 。 又 被 称 为 有 序列 表 , 可 以 用 数字 、 大 小 写字 
母 . 大 小 写 罗 马 数 字 来 标记 。 

文本 缩 进 和 凸 出 : 用 于 通过 应 用 或 删除 blockquote 标签 , 减 小 所 选 文本 或 删除 所 选 文 
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本 的 缩 进 。 在 列表 中 ,运用 缩 进 可 以 创建 一 个 嵌 套 列表 ,而 与 它 有 相反 作用 的 “ 凸 出 ? 则 会 删 
除 缩 进 以 取消 嵌 套 列表 。 

“链接 ”: 用 于 创建 所 选 文本 的 超 文本 链接 。 

“标题 ": 用 于 为 超级 链接 指定 文本 工具 提示 。 

"His": 用 于 指定 将 链接 文档 加 载 到 哪个 框架 或 窗口 。 


3.3.3 插入 图 像 及 图 像 属性 设置 


网 页 中 常用 的 图 像 格式 有 三 种 ,分 别 是 GIF JPEG 和 PNG。 下 面 简 单 介 绍 它 们 的 
(1) GIF 图 像 是 一 种 图 形 交换 格式 ,是 一 种 位 图 图 像 ,最 多 可 以 显示 256 种 颜色 。 它 占 
用 磁盘 空间 小 ,支持 透明 背景 和 动画 ,多 数 用 于 图 标 、 按 钮 .卡通 图 像 .滚动 条 和 背景 等 。 

(2) JPEG 是 一 种 图 像 压 缩 格 式 , 支 持 约 1670 万 种 颜色 。 它 没有 透明 度 和 动画 的 功能 。 
主要 用 于 摄影 图 片 ,一 般 用 来 表示 真实 的 事物 。 

(3) PNG 格式 是 近 几 年 开始 流行 的 一 种 格式 。 它 在 压缩 方面 能 够 像 GIF 一 样 没有 像 
素 上 的 损失 ,还 能 像 JPEG 那样 呈现 更 多 的 颜色 ,在 显示 速度 上 比 GIF AI JPEG 更 快 一 些 ， 
同时 还 支持 透明 度 和 动画 。 

在 网 页 中 插 和 人 图像 的 具体 步骤 如 下 。 

CD 在 设计 视图 下 ,将 光标 放置 在 要 插入 图 像 的 位 置 。 在 “插入 ”面板 的 “常用 ”选项 卡 
中 单 击 国 j 图 标 。 

(2) 弹出 “选择 图 像 源 文件 ”对 话 框 ,从 中 选择 要 插入 的 图 像 文件 。 

(3) 单 击 “ 确 定 ” 按 钮 即 可 完成 图 像 的 插入 。 

插入 图 像 后 , 选 定 图 像 , 可 以 在 “属性 ”面板 中 设置 图 像 的 属性 .“ 属 性 ?面板 如 图 3. 28 
所 示 。 
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图 3.28 图 像 * 属 性 ?面板 


“地 图 ”: 用 于 创建 图 像 的 热 区 。 

Jos TRA ROON. 单 击 这 些 按钮 ,可 以 创建 图 像 的 热点 链接 。 

“ 宽 " 和 “高 ”: 设置 在 浏览 器 中 显示 图 像 的 宽度 和 高 度 , 以 像素 为 单位 。 如 果 要 调整 图 
像 的 大 小 ,可 以 在 “* 宽 ”和 "高 "文本 框 中 输入 相应 的 数值 ,调整 后 ,其 文本 框 的 右 侧 将 显示 ” 习 
设 图 像 大 小 ?按钮 , 单 击 该 按钮 ,可 恢复 图 像 到 原来 大 小 。 

“垂直 边 距 ”和 “水 平 边 距 ”: 分 别 设置 图 像 项 部 、 底 部 的 边 距 和 左右 的 边 距 。 

“ 源 文件 ”: 指定 图 像 的 路 径 , 单 击 文本 框 右 侧 的 “浏览 ”按钮 ,可 弹出 “选择 图 像 源 文件 ” 
对 话 框 ,从 中 可 选择 图 像 文件 。 

“链接 ”: 用 于 指定 图 像 的 链接 文件 。 可 拖 动 “指向 文件 ”图标 图 到 “文件 ”面板 中 的 某 个 
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文件 上 实现 链接 。 

"His": 用 于 指定 链接 页 面 在 框架 或 窗口 中 的 打开 方式 。 其 下 拉 列 表 中 有 以 下 4 个 
选项 。 

(1) _blank: 在 弹出 的 新 浏览 器 窗口 中 打开 链接 文件 。 

(2) parent; 如 果 是 由 套 的 框架 ,会 在 父 框架 或 窗口 中 打开 链接 文件 ; RANE RE 
的 框架 , 则 与 _top 相同 ,在 整个 浏览 器 窗口 中 打开 文件 。 

G) _self: 在 当前 网 页 所 在 的 窗口 中 打开 链接 ,此 目标 为 浏览 器 默认 设置 。 

(4) op: 在 完整 的 浏览 器 窗口 中 打开 链接 文件 。 

“原始 ”: 设置 图 像 下 载 完成 前 显示 的 低 质 量 图 像 。 

“替换 ”: 设置 图 像 的 说 明 性 文字 ,用 于 在 浏览 器 无 法 显示 图 像 时 奉 代 图 像 显 示 的 文本 。 

“编辑 ”: 启动 图 像 编辑 器 中 的 一 组 编辑 工具 对 图 像 进行 复杂 的 编辑 。 

“边框 ”: 设置 图 像 边 框 的 宽度 ,单位 为 像素 。 

“对 齐 ”: 设置 图 像 和 文本 的 对 齐 方式 。 


6.4 创建 链接 


链接 是 网 页 中 极为 重要 的 部 分 , 单 击 文档 中 的 链接 , 即 可 跳 转 至 相应 的 位 置 , 正 是 因为 
有 了 链接 , 才 可 以 在 网 站 中 相互 跳 转 而 方便 地 浏览 各 种 各 样 的 信息 ,享受 网 络 带 来 的 无 穷 乐 
趣 。 在 正式 学 习 链 接 前 ,首先 需要 了 解 链接 中 的 路 径 。 在 计算 机 中 ,每 个 文件 都 有 存放 位 置 
和 路 径 ,这 些 文件 的 路 径 和 存放 位 置 和 用 户 制作 链接 是 紧密 相连 的 。 

链接 中 共有 三 种 路 径 : 绝对 路 径 、 相 对 路 径 、 根 路 径 。 通 常情 况 下 ,在 添加 外 部 链接 时 ， 
使 用 绝对 路 径 ; 为 网 页 添加 内 部 链接 时 ,用 根 路 径 和 文件 的 相对 路 径 。 

补充 : 链接 分 为 内 部 链接 和 外 部 链接 。 它 们 都 是 相对 于 站 点 文件 夹 而 言 的 。 如 果 添 加 
的 链接 是 指向 站 点 文件 天 之 内 的 文件 , 即 为 内 部 链接 ; 如 果 添 加 的 链接 是 指向 站 点 文件 夹 
之 外 的 文件 , 即 为 外 部 链接 。 


1. 绝对 路 径 


绝对 路 径 是 为 文件 提供 的 完整 路 径 ,其 中 包括 适用 的 协议 ,常见 的 有 HTTP、FTP 等 。 
例如 ,http://www. sina. com, 在 这 个 路 径 中 不 仅 有 网 页 的 地 址 ,还 附带 有 它 所 适用 的 协议 。 
当 用 户 制作 的 链接 要 连接 到 其 他 网 站 中 的 文件 时 ,必须 使 用 绝对 路 径 。 


2. 相对 路 径 


相对 路 径 适 用 于 内 部 链接 。 凡 是 属于 同一 网 站 之 下 的 文件 ,就 算 不 在 同一 个 目录 下 ,也 
可 以 使 用 相对 路 径 。 即 : 只 要 是 处 于 站 点 文件 夹 之 内 ,相对 地 址 可 以 自由 地 在 各 个 文件 之 
间 构 建 链接 。 因 为 这 种 地 址 使 用 的 是 构建 链接 的 两 个 文件 之 间 的 关系 ,不 会 受到 站 点 所 处 
的 服务 器 位 置 的 影响 , 故 可 以 省 略 绝对 地 址 中 的 相同 部 分 。 这 种 方式 可 以 保证 在 站 点 文件 
夹 所 在 的 服务 器 地 址 发 生 改变 的 情况 下 ,文件 夹 的 所 有 内 部 链接 都 不 会 出 现 错误 或 无 法 
链接 。 
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3. 根 路 径 


根 路 径 也 适用 于 创建 内 部 链接 ,只 有 站 点 的 规模 非常 大 ,需要 放置 在 几 个 服务 器 上 或 是 
在 一 个 服务 器 上 放置 多 个 站 点 时 才 使 用 。 

根 目录 相对 地 址 在 书写 时 要 以 “/” 开 头 ,代表 根 目录 ,然后 再 在 它 的 后 面 添加 上 文件 夹 
名 和 文件 名 ,按照 它们 的 从 属 顺 序 书 写 。 根 路 径 以 “/” 开 头 , 后 面 则 是 根 目录 下 的 目录 名 ( 例 
如 : /html/index-1. html) 。 


3.4.1 文本 和 图 像 链 接 


浏览 网 页 时 ,会 看 到 一 些 带 下 划 线 的 文字 ,将 鼠标 移动 到 文字 上 时 ,鼠标 指针 将 变 成 手 
形 , 单 击 鼠 标 会 打开 一 个 网 页 ,这样 的 链接 就 是 文本 链接 。 若 将 鼠标 移 到 图 像 上 ,鼠标 指针 
变 成 手 形 , 单 击 鼠标 会 打开 一 个 网 页 ,这 样 的 链接 就 是 图 像 链 接 。 

通过 Dreamweaver 可 以 方便 地 创建 文本 链接 和 图 像 链 接 , 可 以 使 用 站 点 地 图 查看 、 编 
辑 和 删除 链接 。 

创建 文本 链接 的 常用 方法 有 如 下 两 种 。 

CD 在 浏览 视图 中 , 选 定 需要 创建 文本 链接 的 文本 。 单 击 * 属 性 ?面板 中 的 “浏览 文件 ” 
图 标 园 ,位 置 如 图 3. 29 中 1 所 示 。 打 开 * 选 择 文件 对话 框 ,在 该 对 话 框 中 选择 要 链接 的 网 
页 文件 , 单 击 “ 确 定 ” 按 钮 即 可 。 





3.29 浏览 视图 中 创建 链接 
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(2) 在 浏览 视图 中 , 选 定 需要 创建 文本 链接 的 文本 。 单 击 * 属 性 ?面板 中 的 “指向 文件 ” 
图 标 哆 ,位置 如 图 3. 29 中 2 Bros ,将 其 拖 动 到 右面 “文件 ?面板 中 要 链接 的 网 页 上 ,然后 松 
开 鼠 标 , 即 可 完成 文本 链接 的 建立 。 

创建 图 像 链接 的 方法 与 创建 文本 链接 的 方法 类 似 , 常 用 的 有 如 下 两 种 。 

CD 在 浏览 视图 中 , 选 定 需 要 创建 图 像 链接 的 图 像 。 单 击 “ 属 性 ”面板 中 的 “浏览 文件 ” 
Fes ea ,位 置 如 图 3. 29 中 1 所 示 。 打 开 “ 选 择 文件 ”对 话 框 ,在 该 对 话 框 中 选择 要 链接 的 网 
页 文件 , 单 击 “ 确 定 ” 按 钮 即 可 。 

(2) 在 浏览 视图 中 , 选 定 需 要 创建 图 像 链接 的 图 像 。 单 击 “ 属 性 ”面板 中 的 “指向 文件 ” 
图 标 甸 ,位 置 如 图 3.29 中 2 所 示 , 将 其 拖 动 到 右面 “文件 ”面板 中 要 链接 的 网 页 上 ,然后 松 
开 鼠 标 , 即 可 完成 图 像 链接 的 建立 。 

以 上 创建 的 均 是 网 站 的 内 部 链接 ,网 站 的 外 部 链接 创建 方法 与 内 部 链接 类 似 , 需 要 注意 
的 是 外 部 链接 的 创建 ,必须 使 用 绝对 路 径 。 例 如 ,要 在 主页 上 添加 新 浪 网 站 的 图 标 ,将 它们 
与 相应 的 网 站 链接 起 来 。 首 先 需要 选中 该 图 标 ,然后 在 “属性 ”面板 中 的 “链接 "文本 框 中 输 
入 新 浪 的 网 址 www. sina. com. cn 即 可 。 


3.4.2 锚 点 链接 


锚 点 链接 可 以 使 链接 指向 当前 文档 或 不 同文 档 中 的 指定 位 置 ,以 便 使 访问 者 能 够 快速 
地 浏览 到 选 定 的 位 置 ,加 快 信息 检索 的 速度 。 

创建 锚 点 链接 首先 要 设置 一 个 命名 锚 点 ,然后 建立 到 命名 锚 点 的 链接 。 

创建 命名 锚 点 的 步骤 如 下 。 

CD 将 光标 放置 在 要 命名 锚 点 的 位 置 ,或 选中 要 为 其 命名 锚 点 的 文本 。 

(2) 在 “插入 ?面板 的 “常用 ?选项 卡 中 单 击 * 命 名 锚 点 ”图 标 列 。 

(3) 在 弹出 的 “命名 锚 记 ?对 话 框 中 输入 锚 记 名 称 ( 如 top) , 单 击 “确定 ”按钮 , 即 可 在 文 
Pita LL pt fo PUE SI IU M 。 

注意 : 在 一 篇 文档 中 , 锚 记 名 称 是 唯一 的 ,不 允许 在 同一 篇 文档 中 出 现 相同 的 锚 记 名 
称 。 锚 记名 称 中 不 能 含有 空格 ,不 应 置 于 层 内 。 锚 记名 称 区 分 大 小 写 。 

在 文档 中 定义 了 锚 记 后 ,就 可 创建 锚 点 链接 ,步骤 如 下 。 

CD 选中 作为 锚 点 链接 的 文字 (如 网 页 中 常见 的 “返回 顶部 ” 。 

(2) 在 “属性 ”面板 的 “链接 ”文本 框 中 输入 字符 “#” 和 锚 记 名 称 , 如 “# top”。 

G) 保存 文档 , 按 F12 键 即 可 预览 。 

同样 ,命名 锚 记 后 ,也 可 用 “属性 ”面板 中 的 “指向 文件 ”图 标 较 来 创建 锚 记 链接 ,方法 与 
文本 链接 类 似 , 这 里 不 再 闭 述 。 


3.4.3 电子 邮件 链接 


电子 邮件 链接 是 一 种 特殊 的 链接 , 单 击 这 种 链接 ,不 是 跳 转 到 相应 的 网 页 上 ,而 是 会 启 
动 计算 机 中 相应 的 E-mail 程序 ,允许 书写 电子 邮件 ,然后 发 往 指定 地 址 。 

创建 电子 邮件 链接 的 步骤 如 下 。 

CD 将 光标 置 于 文档 窗口 中 要 显示 电子 邮件 链接 的 位 置 ,或 选中 将 显示 为 电子 邮件 链 
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接 的 文本 或 图 像 (如 网 页 中 常见 的 “联系 我 们 ”) 。 

(2) 在 “插入 ?面板 的 “常用 "标签 下 单 击 “电子 邮件 链接 ”图 标 回 . 

(3) 在 弹出 的 “电子 邮件 链接 ”对 话 框 的 “文本 ”文本 框 中 ,输入 或 编辑 作为 电子 邮件 链 
接 显示 在 文档 中 的 文本 ,在 E-mail 文本 框 中 输入 邮件 送 达 的 E-mail 地 址 ,然后 单 击 “ 确 定 ” 
按钮 。 

同样 ,也 可 以 利用 “属性 ”面板 创建 电子 邮件 链接 。 选 定 即将 显示 为 电子 邮件 链接 的 文 
本 或 图 像 ,在 “属性 ”面板 的 “链接 ”文本 框 中 输入 mailto: 和 电子 邮件 地 址 (如 : mailto: 
wysjyzz@sina, com) , 


(4) 保存 文档 Ti F12 键 预览 效果 。 
3.4.4 下 载 文件 链接 


下 载 文 件 链接 的 创建 方法 与 一 般 链 接 的 创建 方法 相同 ,只 是 所 链接 的 内 容 不 是 文字 或 
网 页 ,而 是 一 个 软件 。 其 步骤 如 下 。 

(1) 在 文档 窗口 中 ,选中 要 设置 为 下 载 文件 的 链接 的 文本 。 

(2) 单 击 * 属 性 ”面板 中 的 “浏览 文件 "图 标 园 ,在 打开 的 “选择 文件 "对话 框 中 选择 要 链 
接 的 下 载 文件 ,然后 单 击 “ 确 定 ” 按 钮 即 可 完成 下 载 文件 的 链接 的 创建 。 


3.4.5 链接 的 检查 


当 创建 好 一 个 站 点 后 ,由 于 一 个 网 站 中 的 链接 数量 极 多 ,因此 在 上 传 服务 器 前 应 先 检查 
站 点 中 所 有 链接 是 否 有 效 。 在 Dreamweaver 中 ,可 以 快速 检查 站 点 中 网 页 的 链接 ,其 步骤 
如 下 。 

(1) 菜单 栏 中 选择 “站 点 ”|“ 检 查 站 点 范围 的 链接 ”菜单 命令 ,此 时 会 激活 链接 检查 器 。 

(2) 从 “属性 ”面板 左上 角 的 “显示 ”下 拉 列 表 中 可 以 选择 “ 断 掉 的 链接 ”"“ 外 部 的 链接 ” 
或 “孤立 文件 ”等 选项 。 选 取 相 应 的 选项 ,Dreamweaver 将 对 当前 链接 情况 进行 检查 ,并 将 
相应 的 文件 列表 显示 出 来 ,如 图 3. 30 所 示 。 











图 3. 30 ”链接 的 检查 


(3) 对 于 有 问题 的 文件 ,直接 双击 即 可 将 其 打开 进行 修改 。 


6.5 其 他 的 一 些 网 页 元 素 


网 页 中 除了 文本 、 图 像 . 表 格 等 这 些 基 本 元 素 外 ,还 有 一 些 元 素 也 是 非常 重要 的 ,如 水 平 
线 日 期 ,特殊 字符 和 多 媒体 元 素 等 。 
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3.5.1 插入 水 平 线 


水 平 线 主要 用 于 分 割 文档 内 容 ,使 文档 结构 清晰 明了 ,便于 浏览 。 在 文档 中 插入 水 平 线 
的 方法 如 下 。 

CD 在 文档 中 ,将 光标 置 于 要 插入 水 平 线 的 位 置 。 

(2) 在 菜单 栏 中 选择 “插入 ”| HTML|* 水 平 线 ? 命 令 , 即 可 在 文档 窗口 中 插入 一 条 水 
平 线 。 

(3) 选 定 插入 的 水 平 线 , 选 择 “ 窗 口 "1“ 属 性 ”菜单 命令 ,打开 “属性 ”面板 ,如 图 3. 31 所 
示 , 在 其 中 可 进行 以 下 属性 的 设置 。 
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图 3.31 水 平 线 “ 属 性 ”面板 


“水 平 线 " 文 本 框 : 指定 该 水 平 线 的 ID, 用 于 标识 该 对 象 。 

“ 宽 " 和 “高 ”: 以 像素 为 单位 或 以 页 面 尺 寸 百分比 的 形式 指定 水 平 线 的 宽度 和 高 度 。 

“对 齐 ”: 指定 水 平 线 在 水 平 位 置 上 的 对 齐 方式 ,包括 默认 、 左 对 齐 、 居 中 对 齐 和 右 对 齐 
等 4 个 选项 。 只 有 当 水 平 线 的 宽度 小 于 浏览 器 窗口 的 宽度 时 该 设置 才 可 用 。 

“阴影 ”: 选中 该 复 选 框 ,水 平 线 则 带 有 阴影 效果 。 


3.5.2 插入 日 期 


向 网 页 中 插入 系统 当前 日 期 的 步骤 如 下 。 

CD 在 文档 窗口 中 将 插入 点 放置 到 要 插入 日 期 的 位 置 。 

(2) 选择 “插入 ”1“ 日 期 "菜单 命令 ,或 单 击 “ 插 入 ”面板 “常用 ”选项 卡 中 的 “日 期 "图 标 圈 。 

(3) 弹出 “插入 日 期 "对 话 框 ,在 该 对 话 框 中 ,可 以 分 别 设置 星期 格式 \ 日 期 格式 和 时 间 
格式 。 并 选中 “储存 时 自动 更 新 " 复 选 框 。 

(4) 单 击 “ 确 定 ” 按 钮 即 可 插入 日 期 。 


3.5.3 插入 特殊 字符 


特殊 字符 是 指 版 权 符 号 、 注 册 商 标 符号 、 破 折 号 和 英镑 符号 等 ,这 些 特殊 字符 无 法 从 键 
盘 上 直接 输入 ,Dreamweaver 在 “插入 ”面板 上 专门 设置 了 常见 的 特殊 字符 按钮 , 单 击 这 些 
按钮 即 可 完成 特殊 字符 的 插入 。 其 具体 操作 步骤 如 下 。 

CD 将 光标 放置 在 文档 中 需要 插入 特殊 字符 的 位 置 。 

(2) 选择 “插入 "| HTMLI* 特 殊 字 符 ” 菜 单 命令 , 即 可 插入 所 需要 的 字符 。 如 果 在 “特殊 
字符 ” 子 菜单 中 没有 需要 的 字符 ,可 以 选择 “插入 ”| HTMLI“* 特 殊 字 符 ”|“ 其 他 字符 ”菜单 命 
令 , 从 中 选择 需要 的 特殊 字符 。 

G) 单 击 需 要 的 字符 , 单 击 “ 确 定 ” 按 钮 ,该 字符 即 可 插入 到 文档 中 。 
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3.5.4 插入 多 媒体 对 象 
1. 在 网 页 中 插入 视频 对 象 


CD 将 光标 放置 在 文档 中 将 要 插入 视频 对 象 的 位 置 上 。 

(2) 单 击 “常用 ?面板 中 的 “媒体 ”按钮 一 引 , 这 个 列表 中 列 出 
了 所 有 可 以 在 Dreamweaver 中 插入 的 媒体 类 型 ,如 图 3. 32 所 
示 。 下 面 以 插入 一 个 Flash 为 例 。 

CD 选择 列表 中 的 SWF 选项 ,弹出 一 个 “选择 文件 "对话 框 ， 
在 本 地 计算 机 中 选择 一 个 SWF 文件 后 , 单 击 “确定 ”按钮 即 可 插 
人 一 个 Flash 动画 。 

(4) 选 定 插入 的 Flash 动画 ,选择 “窗口 "|* 属 性 ?菜单 命令 ， 
打开 “属性 ”面板 ,如 图 3. 33 所 示 , 这 里 可 以 对 插入 的 Flash 进行 
以 下 设置 。 





图 3.32 插入 多 媒体 文件 
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图 3.33 Flash* 属 性 ”对 话 框 





























"UBI EST: 设置 插入 的 Flash 动画 的 宽度 和 高 度 。 

编辑 : 单 击 该 按钮 ,会 调 出 外 部 编辑 器 编辑 Flash 文件 。 

重 设 大 小 : 单 击 该 按钮 ,可 恢复 Flash 动画 的 原始 尺寸。 

“垂直 边 距 ”和 “水 平 边 距 ”: 设置 Flash 动画 的 上 下 和 左右 边 距 。 

"Ahn. 用 于 设置 Flash 动画 的 质量 参数 ,有 低 品 质 、 自 动 低 品质 、 自 动 高 品质 和 高 品 
质 等 4 个 选项 ,选取 原则 是 ,品质 越 低 速度 越 快 ,制作 者 根据 自身 需要 选取 。 

“比例 ”: 用 于 设置 缩放 比例 。 

“对 齐 ”: 设置 Flash 动画 在 网 页 中 的 对 齐 方式 。 

Wmode: 可 设置 Flash 动画 的 透明 背景 。 

“背景 颜色 ”: 设置 Flash 动画 区 域 的 背景 颜色 。 

“播放 ”: 在 设计 视图 中 可 以 预览 Flash 动画 的 内 容 。 

“参数 ”: 在 参数 对 话 框 中 可 以 设 定 附加 参数 。 


2. 在 网 页 中 插入 声音 


在 Dreamweaver 中 可 以 插入 的 声音 文件 有 mp3、wav、midi、aif、ra 和 ram 等 。 其 步骤 
如 下 。 

(1) 将 光标 放置 在 文档 中 将 要 插入 音频 对 象 的 位 置 上 。 

(2) 选择 “常用 ”1“ 媒 体 ” 中 的 “插件 ” 子 命令 。 在 本 地 计算 机 中 选择 一 个 声音 文件 ,然后 
单 击 “ 确 定 ” 按 钮 即 可 将 其 添加 到 页 面 中 。 
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(3) 在 文档 窗口 中 只 是 显示 了 一 个 很 小 的 插件 图 标 ,为 了 使 它 的 播放 器 能 在 预览 时 全 
部 显示 出 来 ,需要 在 Dreamweaver 中 将 其 长 和 宽 都 拖拉 成 合适 大 小 。 
(4) 在 浏览 器 中 预览 插入 的 声音 文件 。 


6.6 表单 


表单 在 网 页 中 表现 最 多 的 就 是 一 些 用 户 信息 的 填写 ,例如 ,在 申请 某 个 网 站 的 会 员 时 ， 
就 需要 填写 一 些 个 人 资料 ,而 实现 这 些 个 人 资料 的 功能 ,都 是 由 Dreamweaver 中 的 表单 来 
实现 的 ,表单 可 以 向 后 台数 据 库 提交 这 些 数据 。 


3.6.1 表单 介绍 


表单 一 般 情 况 下 由 两 部 分 组 成 ,一 部 分 是 描述 表单 元 素 的 HTML 源 代码 , 另 一 部 分 是 
客户 端 处 理 用 户 所 填 信 息 的 程序 ,如 ASP 和 CGI 等 。 当 浏览 者 在 网 页 中 填写 完 需 要 的 信 
息 后 , 单 击 “提交 ?按钮 ,那么 输入 在 表单 中 的 信息 就 会 上 传 到 服务 器 中 ,然后 再 由 服务 器 的 
有 关 应 用 程序 进行 处 理 。 处 理 后 要 么 将 提交 的 信息 存储 在 服务 器 端的 数据 库 中 (如 银行 系 
统 的 用 户 资料 ) ,要 么 将 有 关 的 信息 返回 到 客户 端的 浏览 器 上 (如 提示 申请 会 员 成 功 或 该 用 
户 名 重复 等 ) 。 


3.6.2 表单 的 使 用 














文本 字段 文本 区 域 — 复 选 框 组 单 选 按钮 组 _ 跳 转 菜 

















SENE 





隐藏 域 





表单 单 选 按钮 ”列表 /菜单 。 图 像 域 。 “按钮 字段 集 


Spry 

Spry 验 证 文本 区 域 Spry 验 证 确认 
图 3. 34 “表单 ”选项 卡 

表单 是 独立 的 单元 , 它 不 能 像 表格 一 样 任意 嵌 套 。 

1. 创建 表单 域 


每 一 个 表单 中 都 包括 一 个 表单 域 和 若干 个 表单 元 素 。 所 有 的 表单 元 素 都 要 放 在 这 个 表 
单 域 中 才能 生效 ,因此 ,创建 表单 时 要 先 插入 表单 域 。 其 步骤 如 下 。 

CD 将 光标 放置 在 将 要 插入 表单 的 位 置 。 

(2) 选择 “插入 ”面板 中 的 “表单 ?选项 卡 , 单 击 “ 表 单 " 按 钮 。 

(3) 页 面 上 会 出 现 一 条 红色 的 虚线 , 即 可 插入 表单 。 

(4) 选中 表单 ,或 在 标签 选择 器 中 选择 二 form# forml 二 标签 ,可 打开 表单 的 “属性 ” 面 
板 , 其 中 可 进行 以 下 设置 。 

O “表单 ID”: 输入 唯一 名 称 以 标识 表单 。 
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@ “动作 ”: 设置 处 理 该 表单 动态 页 或 脚本 的 路 径 。 

Q “方法 ”: 选择 表单 数据 传输 到 服务 器 的 方法 ,有 以 下 三 种 。 

。 默认 : 使 用 浏览 器 的 默认 设置 将 表单 数据 发 送 到 服务 器 。 通 常 的 默认 方法 为 GET。 

* GET; 将 值 追加 到 请 求 该 页 的 URL 中 。 使 用 GET 方法 发 送 长 表单 时 ,URL 的 长 
度 限 制 在 8192 个 字符 以 内 。 发 送 的 数据 量 太 大 ,数据 将 被 截断 ,从 而 导致 意外 或 失 
败 的 处 理 结果 。 由 于 使 用 GET 方法 传递 信息 不 安全 ,因此 不 用 于 发 送 机 密 用 户 名 
和 密码 、 信 用 卡 卡号 或 其 他 机 密 信息 。 

* POST: 在 HTTP 请 求 中 嵌入 表单 数据 。 

@ 轩 “编码 类 型 : 指定 对 提交 给 服务 器 进行 处 理 的 数据 使 用 MIME 编码 类 型 。 

表单 域 完成 后 ,就 可 以 向 其 中 添加 所 需要 的 表单 元 素 了 ,下 面 就 常见 的 表单 元 素 的 插入 

及 其 属性 的 设置 做 一 介绍 。 


2. 使 用 文本 域 
文本 域 是 可 以 输入 文本 内 容 的 表单 对 象 。 用 户 可 以 创建 一 个 包含 单行 或 多 行 的 文本 
域 , 也 可 以 创建 一 个 隐藏 用 户 输入 文本 的 密码 文本 域 。 


(1) 单 击 插入 栏 中 “表单 ”选项 卡 中 的 “文本 区 域 " 按 钮 团 ,一 个 文本 域 随即 出 现在 文档 
中 ,如 图 3. 35 所 示 。 
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图 3.35 插入 文本 域 
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(2) 在 属性 检查 器 中 ,根据 需要 设置 文本 域 的 属性 ,如 图 3. 36 所 示 。 
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图 3.36 文本 域 属性 设置 


“字符 宽度 ”: 设置 域 中 可 显示 的 最 大 字符 数 。 此 数值 可 以 小 于 “最 多 字符 数 ”。 

“最 多 字符 数 ”: 设置 单行 文本 域 中 可 输入 的 最 大 字符 数 , 该 文本 框 只 会 在 用 户 选择 “ 单 
行 "或 “密码 ”选项 时 会 出 现 。 例 如 ,使 用 “最 多 字符 数 ” 将 手机 号 限制 为 11 位 数 , 将 密码 限制 
为 10 个 字符 等 。 

“类 型 : 指定 是 单行 .多 行 或 密码 域 。 

中 “单行 ": 输入 的 文字 不 会 发 生 换行 ,一 般 情 况 下 用 于 一 些 简单 的 输入 设置 。 

Q “多 行 ”: 输入 的 文字 如 果 超 出 了 字符 宽度 ,就 会 产生 换行 。 常 见于 一 些 论坛 帖子 的 
评论 设置 。 

O “密码”: 产生 一 个 密码 文本 域 。 当 用 户 在 密码 文本 域 中 输入 时 ,输入 的 内 容 显示 为 
项 目 符号 或 星 号 ,以 保护 它 不 被 其 他 人 看 到 。 

"HINC. 在 选中 了 ”多 行 ? 单 选 按钮 时 可 用 。 设 置 多 行文 本 域 的 域 高 度 , 实 际 上 就 是 设 
置 当前 这 个 文本 域 的 高 度 。 

“初始 值 ”: 指定 在 首次 载 入 表单 时 域 中 所 显示 的 文字 。 例 如 ,通过 包含 说 明 或 示例 文 
字 , 可 以 指示 用 户 在 域 中 输入 信息 。 

"EU. 将 CSS 应 用 于 对 象 。 


3. 使 用 复 选 框 


复 选 框 常 被 用 于 有 多 种 条 件 供 选择 的 情况 下 ,用 户 在 填写 到 这 一 项 时 可 以 选择 很 多 项 。 
每 个 复 选 框 都 是 独立 的 ,必须 有 一 个 唯一 的 名 称 。 

CD 单 击 插入 栏 中 “表单 ”选项 卡 中 的 “ 复 选 框 ”按钮 闷 ,一 个 复 选 框 随即 出 现在 文档 中 ， 
反复 单 击 “ 复 选 框 ”按钮 ,可 以 创建 更 多 的 复 选 框 ,如 图 3. 37 所 示 。 

(2) 在 属性 检查 器 中 ,根据 需要 设置 复 选 框 的 属性 ,如 图 3. 38 所 示 。 

“ 复 选 框 名 称 ”: 为 该 对 象 指 定 一 个 名 称 ,名 称 必须 在 该 表单 内 唯一 标识 该 复 选 框 , 且 名 
称 不 能 包含 空格 或 特殊 字符 。 

“ 选 定 值 ”: 设置 在 该 复 选 框 被 选中 时 发 送 给 服务 器 的 值 。 

“初始 状态 ”: 确定 在 浏览 器 中 载 人 表单 时 该 复 选 框 是 否 显示 被 选中 状态 。 

“K”: 将 CSS 应 用 于 对 象 。 


4. 使 用 单 选 按钮 


单 选 按钮 与 复 选 框 相似 ,主要 用 于 标记 一 个 选项 是 否 被 选中 , 单 选 按钮 只 允许 用 户 从 选 
项 中 选择 唯一 答案 。 单 选 按钮 通常 成 组 使 用 ,同一 组 中 的 所 有 单 选 按钮 必须 具有 相同 的 名 
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图 3.38 复 选 框 属性 设置 


称 ,但 它们 的 域 值 必须 是 不 同 的 。 

(1) 单 击 插 入 栏 中 “表单 ”选项 卡 中 的 *“ 单 选 按钮 "[ 加 插入 单 选 按钮 ,随即 在 文档 中 出 现 
一 个 单 选 按钮 。 反 复 单 击 单 选 按钮 ,可 以 创建 更 多 单 选 按钮 ,如 图 3. 39 所 示 。 

(2) 在 属性 检查 器 中 ,根据 需要 设置 单 选 按钮 的 属性 ,如 图 3. 40 所 示 。 

“ 单 选 按钮 ”: 为 该 对 象 指定 一 个 名 称 。 注 意 , 一 组 单 选 按钮 必须 使 用 同一 个 名 称 , 但 
“ 选 定 值 ? 不 能 相同 。 

(3) 在 浏览 器 中 预览 ,使 用 了 单 选 按钮 后 ,一 次 只 能 选择 一 项 。 
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3.40 单 选 按钮 属性 


5. 使 用 单 选 按 钮 组 


用 户 可 以 用 单 选 按钮 一 个 个 地 创建 表单 选项 ,也 可 以 用 单 选 按钮 组 来 同时 创建 多 个 表 
单 选项 。 在 创建 多 个 选项 时 , 单 选 按 钮 组 比 单 选 按钮 的 操作 更 快捷 。 

CD 将 插入 点 放 在 表单 域内 。 单 击 插入 栏 中 "表单 "选项 卡 中 的 * 单 选 按钮 组 ”按钮 图 
出 现 * 单 选 按钮 组 ?对话 框 ,如 图 3. 41 所 示 。 

(2) 在 这 个 对 话 框 中 可 以 设置 一 个 单 选 按钮 组 中 需要 包含 多 少 个 单 选 按钮 ,并 且 还 能 
够 通过 标签 的 设置 为 每 个 选项 添加 内 容 。 


6. 使 用 列表 /菜单 


除了 选用 复 选 框 和 单 选 按钮 为 用 户 提供 选项 ,还 可 以 用 列表 /菜单 来 制作 选项 。 列 表 / 
菜单 可 以 显示 一 个 列 有 项 目的 可 滚动 列表 ,用 户 可 以 从 该 列表 中 选择 项 目 。 当 用 户 的 空间 
有 限 又 需要 显示 许多 菜单 项 时 ,列表 /菜单 就 会 非常 有 用 。 
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图 3.41 插入 单 选 按钮 组 


(1) 单 击 插入 栏 中 “表单 ”选项 卡 中 的 “列表 /菜单 "按钮 国 ,文档 中 便 会 出 现 一 个 菜单 ， 
如 图 3. 42 所 示 。 














OX ~ x 399v Unicos 


图 3.42 插入 列表 /菜单 


(2) 在 属性 检查 器 中 根据 需要 设置 其 属性 。 在 图 3. 42 中 需要 选择 的 是 地 址 ,所 以 在 属 
性 检查 器 中 将 “类 型 "项 选择 为 “列表 ”, 如 图 3. 43 所 示 。 

(3) 单 击 属性 检查 器 中 的 “列表 值 ” 按 钮 ,打开 “列表 值 ” 对 话 框 。 在 这 里 对 准备 用 来 选 
择 的 项 目 进 行 编辑 。 单 击 “ 添 加 ”按钮 可 以 为 项目 标签 ” 栏 添 加 列表 项 ,而 每 个 列表 项 又 可 
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图 3.43 选择 “列表 ” 


以 通过 * 值 ?来 设置 链接 地 址 ,如 图 3. 44 所 示 。 











3.44 ”添加 列表 值 


(4) 设置 完毕 后 ,就 可 以 在 浏览 器 中 预览 ,并 对 设置 好 的 项 目 进行 选择 ,如 图 3. 45 
所 示 。 
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图 3.45 预览 效果 


7. 使 用 跳 转 菜单 


跳 转 菜单 利用 表单 元 素 形成 各 种 选项 的 列表 。 当 选中 列表 中 的 某 个 选项 时 ,浏览 器 会 
立即 跳 转 到 一 个 新 的 网 页 。 

(1) 单 击 插 入 栏 中 “表单 ”选项 卡 中 的 “ 跳 转 菜单 "按钮 国 ,随即 出 现 * 插 入 跳 转 菜单 ”对 
WAHE ,根据 需要 设置 其 属性 。 如 果 在 设置 的 时 候 , 将 * 菜 单 之 后 插入 前 往 按钮 " 复 选 框 选中 ， 
那么 插入 的 跳 转 表单 中 就 会 自动 带 一 个 “前 往 ” 按 钮 ,如 图 3. 46 所 示 。 

(2) 设置 完毕 后 可 以 在 浏览 器 中 预览 设置 好 的 选项 , 单 击 “ 前 往 ” 按 钮 就 可 以 把 当前 选 
中 的 网 页 打开 。 
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图 3.46 插入 跳 转 菜单 


8. 使 用 图 像 域 


在 网 页 中 搬入 图 像 域 能 够 使 页 面 更 加 丰富 多 彩 。 如 果 使 用 图 像 来 执行 任务 而 不 是 提交 
数据 , 则 需要 将 某 种 行为 附加 到 表单 对 象 。 

单 击 插入 栏 中 “表单 ”选项 卡 中 的 “图 像 域 ”按钮 国 , 即 会 出 现 “ 图 像 源 文件 ”对 话 框 , 选 
择 一 张 本 地 计算 机 上 的 图 片 作为 表单 对 象 。 

如 果 需 要 对 插入 的 图 像 进行 编辑 ,可 以 在 属性 检查 器 中 单 击 “ 编 辑 图像 按 钮 ,就 可 以 直 
接 打开 Firework 或 Photoshop 图 像 处 理 软 件 。 


9. 使 用 文件 域 


文件 域 对 象 比 文件 框 对 象 多 了 一 个 “浏览 按钮。 浏览 者 可 以 通过 这 个 按钮 来 选择 需要 
上 传 文件 的 路 径 和 名 称 。 

(1) 单 击 插入 栏 中 * 表 单 ? 选 项 卡 中 的 “文件 域 " 按 钮 吏 ,随即 插入 一 个 文件 域 对 象 , 如 
图 3. 47 所 示 。 














3.47 插入 文件 域 
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(2) 选中 插入 的 文件 域 对 象 , 在 属性 检查 器 中 根据 需要 可 以 设置 “字符 宽度 ”和 “最 多 字 
符 数 ” 以 限制 文件 域 的 显示 ,如 图 3. 48 所 示 。 


属性 























E 文件 域名 称 SHREW | AO 无 ~ 
fileField | 最 多 字符 数 创 )| 

图 3.48 文件 域 属性 
10. 使 用 标准 按钮 


按钮 对 于 表单 而 言 必 不 可 少 , 它 可 以 控制 表单 的 操作 。 使 用 按钮 可 将 表单 数据 提交 到 
服务 器 ,或 者 重 置 该 表单 。 在 Dreamweaver 中 可 以 通过 图 片 来 制作 按钮 ,也 可 以 使 用 表单 
里 的 按钮 。 表 单 中 的 按钮 外 形 无 法 改变 ,但 是 却 比 图 像 按 钮 用 起 来 更 加 方便 。 

(1) 单 击 插入 栏 中 “表单 ”选项 卡 中 的 加 按钮 ,一 个 按钮 随即 出 现在 文档 中 ,如 图 3. 49 
所 示 。 

| 
XD RAD EEV MAD PAM BHO SAO BAO 


oom Oa fr rer n E | e oO) 8 o| 











图 3.49 插入 按钮 


(2) 在 属性 检查 器 中 根据 需要 设置 该 按钮 的 属性 。 在 * 值 ?项 中 ,可 以 为 这 个 按钮 添加 
名 称 , 然 后 再 按照 名 称 选择 合适 的 动作 ,如 图 3. 50 所 示 。 


a 

















按钮 名 称 1800 提交 动作 回 提交 表单 GE) OF ABO 无 id 
Os © 


PA 3.50 设置 按钮 属性 


小 结 


Dreamweaver 是 目前 最 优秀 的 网 页 编辑 和 网 站 管理 软件 之 一 。 本 章 循序 渐进 地 介绍 
了 Dreamweaver CS6 的 基本 操作 方法 ,如 输入 与 编辑 文本 、 建 立 站 点 的 方法 .插入 与 编辑 图 
像 、 表 格 、 多 媒体 元 素 、 表 单 等 。 
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v 
习题 
w 


1. Dreamweaver CS6 的 工作 区 主要 包括 哪些 内 容 ? 

2. 常用 功能 面板 主要 包括 哪些 内 容 ? 

3. 什么 是 站 点 ? 

4. 在 本 地 计算 机 中 创建 站 点 名 称 为 my web 的 站 点 ,并 在 该 站 点 中 创建 名 为 image 和 
style 的 文件 夹 ; 在 站 点 内 部 创建 index. html, jieshao. html, yinyue. html, shiyin. html, 
zhuce. html 和 div. css 文件 。 向 image 文件 夹 内 复制 多 张 图 像 , 练 习 复 制 、 移 动 、 删 除 、 粘 贴 
等 操作 。 

5. 在 第 4 题 中 创建 的 index. html 中 ,输入 文字 ,插入 图 像 , 多 媒体 元 素 等 练习 相关 编辑 
操作 ,创建 各 种 超 链接 。 
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ABER. 

。 CSS3 AR; 

* CSS3 基础 语法 ; 

* 在 Dreamweaver 中 使 用 CSS 样式 ; 

。 编辑 CSS 样式 ; 

。 网 页 布局 规划 。 

一 个 网 页 设计 者 对 于 HTML 一 定 不 陌生 ,因为 它 是 所 有 网 页 制作 的 基础 。 但 是 如 果 
es 大 方 , 并 且 升 级 方便 ,维护 轻松 ,那么 仅 知道 HTML 是 不 够 的 ,CSS 在 

这 中 间 扮 演 着 重要 的 角色 。 本 章 从 CSS 的 基础 概念 出 发 ,介绍 CSS 语言 的 特点 ,以 及 如 何 

在 网 页 中 应 用 CSS, 并 对 常见 网 页 类 型 如 何 用 CSS 进行 布局 进行 简要 介绍 。 


4. 1 CSS3 介绍 
— 


4.1.1 CSS3 功能 


CSS(Cascading Style Sheets) ky Ee FEGX X JI CSS 样式 表 或 样式 表 , 其 文件 扩 
展 名 为 . css, CSS 是 用 于 增强 或 控制 网 页 样式 ,并 将 样式 信息 与 网 页 内 容 分 离 的 一 种 标记 
语言 。 

引用 样式 表 的 目的 是 将 “网 页 结构 代码 ”和 “网 页 样式 风格 代码 ”分 离开 ,从 而 使 网 页 
计 者 可 以 对 网 页 布局 进行 更 多 的 控制 。 利 用 样式 表 , 可 以 将 整个 网 站 M RAUS 
At CSS 文件 ,设计 者 只 需要 修改 CSS 文件 中 的 某 一 行 ,整个 网 页 上 对 应 的 样式 都 会 随 之 
发 生 改 变 。 

CSS 目前 有 三 个 不 同 层 次 的 标准 , 即 CSS1,CSS2,CSS3。 

CSS1 主要 定义 了 网 页 的 基本 属性 ,如 字体 颜色、 空白 边 等 。CSS2 在 此 基础 上 添加 了 
一 些 高 级 功能 ,如 浮动 和 定位 ,以 及 一 些 高 级 选择 器 ,如 子 选 择 器 、 相 邻 选择 器 和 通用 选择 器 
等 。CSS3 开始 遵循 模块 化 开发 ,这 有 助 于 理 清 模块 化 规范 之 间 的 不 同 关系 ,减少 完整 文件 
的 大 小 。 以 前 的 规范 是 一 个 完整 的 模块 ,实在 是 太 庞大 、 太 复杂 ,所 以 ,新 的 CSS3 规范 将 其 
分 成 了 多 个 模块 。 
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CSS3 制定 完成 后 ,具有 了 很 多 新 功能 , 即 新 样式 。 但 这 些 新 样式 在 浏览 器 中 不 能 获得 
完全 支持 ,主要 在 于 各 种 浏览 器 对 CSS3 很 多 细节 处 理 上 存在 差异 。 但 CSS3 是 一 个 具有 强 
大 发 展 潜力 的 新 技术 ,在 样式 修饰 方面 , 它 具 有 不 可 取代 的 地 位 。 





4.1.2 CSS 规则 


1. CSS 基本 语法 


CSS 文 件 是 纯 文本 格式 文件 ,可 以 使 用 系统 自 带 的 文本 工具 编辑 ,如 常见 的 记事 本 ; 也 
可 以 选择 专业 的 CSS 编辑 工具 ,如 Dreamweaver。 

CSS 样式 表 由 若干 条 样式 规则 组 成 ,这 些 样式 规则 可 以 应 用 到 不 同 的 元 素 或 文档 来 定 
义 它 们 显示 的 外 观 。 每 一 条 样式 规则 由 三 部 分 构成 : 选择 符 (selector) 、 属 性 (properties) 和 
属性 值 (value) ,基本 格式 如 下 : 





selector(property:value] 


CD selector 选择 符 有 多 种 形式 , 既 可 以 是 文档 中 的 HTML trict. &i<body> <table>, 
<p>% ay Wd XML 文档 中 的 标记 。 

(2) property 属性 则 是 选择 符 指 定 的 标记 所 包含 的 属性 。 

(3) value 指定 了 属性 的 值 。 如 果 定 义 选择 符 的 多 个 属性 , 则 属性 和 属性 值 为 一 组 ,组 
与 组 之 间 用 分 号 (; ) 隔 开 。 基 本 格式 如 下 : 


selector{ property] :value; property2:value2; …} 
下 面 给 出 一 条 样式 规则 ,如 : 
p{color:red} 


该 样式 规则 的 选择 符 为 p, 为 段落 标记 二 p 二 提供 样式 ,color 为 指定 文字 颜色 属性 ,red 
为 属性 值 。 此 样式 表示 标记 二 p 二 指定 的 段落 文字 为 红色 。 
如 果 要 为 段落 设置 多 种 样式 , 则 可 以 使 用 下 列 语句 : 


p(font- family:Tahoma, Geneva, sans — serif;color:red; font - size:12px;font — weight: bold} 


2. 手工 编写 CSS 


CSS 是 文本 格式 ,传统 的 文本 编辑 器 (如 记事 本 或 Word) 都 可 以 编辑 CSS, 但 这 些 编辑 
工具 软件 不 支持 语法 提示 ,不 支持 验证 ,严重 影响 开发 效率 。 但 使 用 记事 本 手工 编写 CSS. 
有 利于 初学 者 更 快 地 掌握 CSS3 技术 。 

使 用 记事 本 编写 CSS 和 使 用 记事 本 编写 HTML 文档 基本 一 样 。 首 先 需 要 打开 一 个 记 
事 本 ,然后 在 里 面 输入 相应 的 CSS 代码 即 可 ,具体 步骤 如 下 。 

(1) 打开 记事 本 ,编写 HTML 文档 ,如 图 4. 1 所 示 。 

(2) 添加 CSS 代码 ,修饰 HTML 元 素 。 在 head 标记 中 间 , 添 加 CSS 样式 代码 ,如 图 4.2 
所 示 。 
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图 4.1 用 记事 本 编写 HTML 文档 














图 4.2 添加 CSS 代码 


从 窗口 中 可 以 看 出 ,在 head 标记 中 间 , 添 加 了 一 个 style 标记 , 即 CSS 样式 标记 。 在 
style 标记 中 间 ,对 p 进行 了 设 定 , 这 里 设置 段落 居中 显示 并 且 颜 色 为 红色 。 

(3) 网 页 编辑 完 后 ,保存 为 扩展 名 为 . html 的 文件 ,使 用 浏览 器 打开 ,如 图 4. 3 Bros ,可 
以 看 到 段落 在 网 页 中 间 以 红色 字体 显示 。 


3. Dreamweaver 编写 CSS 


Dreamweaver 编辑 器 有 语法 着 色 , 带 输入 提示 ,甚至 有 自动 创建 CSS 的 功能 , 深 受 开发 
人 员 喜 爱 。 使 用 Dreamweaver 创建 CSS 步骤 如 下 。 
(1) 使 用 Dreamweaver 创建 HTML 文档 ,如 图 4.4 所 示 。 


Th 
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这 是 一 个 段落 ， 使 用 CSS 修 饰 








图 4.3 浏览 器 预览 效果 


> 
head. 

<meta http-equive"Content-Iype* content= 
"text/html; charsetautf-8 /> 
<cicle> 无 标 是 文档 </irle> 

</head> 


eap 
‘Sei oceameaverttcsstti-| 


</body> 
</html> 





图 4.4 创建 HTML 文档 
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(2) 在 设计 模式 中 ,选中 需 创建 CSS 的 文本 , 右 击 并 在 弹出 的 快捷 菜单 中 选择 “CSS 样 
式 ”1“ 新 建 "命令 ,弹出 如 图 4. 5 所 示 的 对 话 框 。 





选择 器 类 型 
29 CSS 规则 选择 上 下 文选 择 器 类 型 。 
CNE 
BRIER: 
选择 或 输入 选择 器 名 称 。 
body 


[Xr d 











E 


TARR 


规则 定义 
选择 定义 规则 的 位 置 。 
REX =] 




















图 4.5 “新 建 CSS 规则 ?对 话 框 
该 对 话 框 中 ,在 “为 CSS 规则 选择 上 下 文选 择 器 类 型 "下 拉 列 表 中 ,选择 “标签 (重新 定 


X HTML 元 素 ) "选项 (后 续 内 容 学 过 后 ,读者 可 根据 需要 选择 不 同 的 选择 器 类 型 )。 选 择 
完成 后 , 单 击 “确定 ”按钮 ,会 显示 如 图 4.6 所 示 的 对 话 框 。 

















分 类 类 型 
Font-family Œ): Courier New, Courier, monospace < 
Font-size(S): 12 - [px 加 Font-weight W): bolder ~ 
J — —— 
Fa Font-style(D: normal ~ Font-variant(V): normal ~ 
Line-hei ght D: ~ [px =) Text-transform D = 
Text-decoration Q): [underline W Color © : [| err 
E overline W 
Hline-through L) 
Mblin@) 
B none QD 
MDW | Lie) HÀ || ERW 
































4.6 选择 类 型 


该 对 话 框 中 ,可 以 选择 p 的 各 种 样式 设置 。 完 成 选择 后 , 单 击 “确定 ”按钮 ,就 完成 p FÉ 
式 的 设置 了 。 效 果 如 图 4.7 所 示 。 从 代码 窗口 来 看 ,可 以 看 到 在 二 head 二 标记 中 ,增加 了 一 
个 style 标记 ,用 来 放置 CSS 样式 。 其 样式 用 来 修饰 段落 po 

除了 上 述 使 用 Dreamweaver 设置 CSS 外 ,用 户 还 可 以 直接 在 代码 视图 中 编写 CSS 代 
码 ,此 时 会 有 语法 提示 。 
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47 CSS 设置 效果 


4.1.3 链接 和 导入 CSS 样式 


CSS 样式 表 能 很 好 地 控制 页 面 显示 ,以 达到 分 离 网 页 内 容 和 样式 代码 。CSS 样式 表 控 
制 HTMLS 页 面 达 到 好 的 样式 效果 ,其 方法 通常 包括 行内 样式 .内 艇 样式 .链接 样式 和 导入 
样式 。 


1. 行内 样式 


行内 样式 是 所 有 样式 中 比较 简单 直观 的 方法 ,就 是 直接 把 CSS 代码 添加 到 HTML 的 
标记 中 , 即 作为 HTML 标记 的 属性 标记 存在 。 通 过 这 种 方法 ,可 以 很 简单 地 对 某 个 元 素 单 
独 定义 样式 。 

使 用 行内 样式 方法 是 直接 在 HTML 标记 中 使 用 style 属性 ,该 属性 的 内 容 就 是 CSS 的 
属性 和 值 。 例 如 : 


<p style = "font - size: 18px; "> 行内 样式 </p> 
【 例 4.1】 行内 样式 实例 。 


<html> 
<head> 
<title> 行 内 样式 </title> 
</head> 
<body> 
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<p style = "color:red; font - size:20px; text — decoration: underline; 
text - align:center"> 此 段落 使 用 行内 样式 修饰 </p> 

<p style = "color:blue;font- style: italic"> 正 文 内 容 </p> 

</body> 

</html> 


网 页 显示 效果 如 图 4. 8 所 示 。 


B orema 6.2 >Q x4 mE ome IA "c "0-0 x 
€ |(O || ft © fie//H/9*1/ch03/3.3.ht ty B. Q| 
Dte- Gms Dpmuckx DARES [ieee B Chris Sh $ Kerbero 
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此 段落 使 用 行内 I$ 





EXAE 











图 4.8 浏览 器 显示 效果 


尽管 行内 样式 简单 ,但 这 种 方法 不 常 使 用 。 因 为 这 样 添加 无 法 发 挥 样式 表 * 内 容 结构 与 
样式 控制 代码 ” 相 分 离 的 优势 。 并 且 这 种 方式 也 不 利于 样式 的 重用 ,如 果 为 每 一 个 标签 都 设 
HE style 属性 ,后 期 维护 成 本 过 高 ,网 页 元 余 量 大 ,运行 缓慢 。 


2. ARIER 


PY HR RES REE CSS FERARI HS Jn 8] <head> 5j </head> Z ii] . Jf HL JH — style RI 
</style> bii 3E (155 WY, xc fi 55 1 80 8 DG 56 Fe SB TT ZEAL PE SC di] F8 à 4e Ar 
离 , 但 可 以 设置 一 些 比较 简单 的 样式 ,并 统一 页 面 样式 。 

其 格式 如 下 : 


<head> 
<style type = "text/css"> 
== 
P 
{ 
Color: red; 
Font - size:12px; 
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} 
--> 
</style> 
</head> 


去 ! e> WE FTE» BR SR IR ASS DA A JG 1s fE SE BRE AC «UU DEE Be C 
码 不 进行 解析 。 这 是 为 了 防止 低 版 本 的 浏览 器 显示 错误 。 建 议 加 上 这 个 标记 。 
[814.2] Pi ESC H. 


<html> 
<head> 
«title» i X</title> 
<style type = "text/css"> 
pf 
color: orange; 
text - align:center; 
font - weight : bolder; 
font - size:25px; 
) 
</style> 
</head > 
< body > 
<p> 此 段落 使 用 内 嵌 样 式 修饰 </p> 
<p> 正 文 内 容 </p> 
</body> 
</html > 


网 页 显示 效果 如 图 4.9 所 示 。 
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正文 内 容 














图 4.9 浏览 器 显示 效果 
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内 艇 样式 只 适用 于 为 特殊 页 面 设置 单独 的 样式 风格 。 
3. 链接 样式 


链接 样式 是 CSS 中 使 用 频率 最 高 的 方法 。 它 将 “页 面 内 容 * 和 “样式 风格 代码 ”分 离 
成 两 个 或 多 个 文件 ,实现 了 页 面 框架 HTML 代码 和 CSS 代码 的 完全 分 离 ,使 前 期 制作 和 
后 期 维护 都 十 分 方便 。 同 一 个 CSS 文 件 , 根 据 需 要 可 以 链接 到 网 站 中 所 有 的 HTML 页 
面 上 。 

链接 样式 是 指 在 外 部 定义 CSS 样式 表 并 形成 以 . css 为 扩展 名 的 文件 ,然后 在 页 面 中 通 
过 一 link 之 链接 标记 链接 到 网 页 中 ,该 链接 语句 必须 放置 在 页 面 的 一 head 之 标记 区 ,如 下 
所 示 : 


<link rel = "stylesheet" type = "text/css" href ="1.css"/> 


COD rel 指定 链接 到 样式 表 , 其 值 为 stylesheet。 

(2) type 表示 样式 表 类 型 为 CSS 样式 表 。 

(3) href 指定 了 CSS 样式 表 的 所 在 位 置 ,此 处 表示 当前 路 径 下 名 称 为 1. css 的 文件 。 
【 例 4. 3】 链接 样式 实例 。 

(1) 链接 样式 的 . html 文件 。 


< html > 

<head > 

<title> 链 接 样式 </title> 

«link rel = "stylesheet" type = "text/css" href = "3.5.css" /> 
</head> 

<body> 

< hl > CSS 学 习 </hl > 

<p> 此 段落 使 用 链接 样式 修饰 </p> 

«/body » 

</html> 


(2) 链接 样式 的 . css 文件 。 


hl(text- align:center; } 

p{font - weight :29px; text - align:center; font - style: italic; } 

其 网 页 中 的 显示 效果 如 图 4. 10 所 示 。 

链接 样式 的 最 大 优势 是 将 CSS 代码 和 HTML 代码 完全 分 离 , 并 且 同 一 个 CSS 文件 能 
被 不 同 的 HTML 所 链接 使 用 。 


4. 导入 样式 


导入 样式 和 链接 样式 基本 相同 .都 是 创建 一 个 单独 的 CSS 文件 ,然后 再 引入 到 HTML 
文件 中 。 只 不 过 语法 和 运作 方式 有 差别 。 采 用 导入 样式 的 样式 表 , 在 HTML 文件 初始 化 
时 ,会 被 导入 到 HTML 文件 内 ,作为 文件 的 一 部 分 ,类 似 于 内 嵌 效 果 。 而 链接 样式 是 在 
HTML 标记 需要 样式 风格 时 才 以 链接 方式 引入 。 
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图 4.10 浏览 器 显示 效果 


导入 外 部 样式 表 是 指 在 内 部 样式 表 的 二 style 二 标记 中 ,使 用 @import 导入 一 个 外 部 样 
式 表 , 例 如 : 


<head> 
< style type = "text/css"> 
<! 一 
(à import "1.css" 
--> 
</style> 
</head > 


导入 外 部 样式 表 相 当 于 将 样式 表 导 入 到 内 部 样式 表 中 ,其 方法 更 有 优势 。 导 入 外 部 样 
式 表 必须 在 样式 表 的 开头 部 分 , 即 其 他 内 部 样式 表 前 面 。 

【 例 4.4】 导入 样式 。 

(OD . html 文件 部 分 。 


<html> 

<head> 

<title> 导 人 样式 </title> 
< style> 

(à) import "3.6.css" 
</style> 

</head > 

<body> 

<hl>CSS 学 习 </hl > 
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<p> 此 段落 使 用 导入 样式 修饰 </p> 
</body> 
</html > 


(2) .css 部 分 。 


hi(text- align:center;color: # 0000ff} 
p{font - weight:bolder;text — decoration: underline; font — size:20px; } 


网 页 显示 效果 如 图 4. 11 所 示 。 
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图 4.11 浏览 器 显示 效果 


导入 样式 与 链接 样式 比较 ,最 大 的 优点 是 可 以 一 次 导入 多 个 CSS 文件 ,其 格式 如 下 : 


<sytle> 

@import "p.css" 
@import "text. css" 
</style> 


4.1.4 优先 级 问题 


如 果 同 一 个 页 面 采用 了 多 种 CSS 使 用 方式 , 且 这 几 种 样式 共同 作用 于 一 个 标记 ,就 会 
出 现 优先 级 问题 , 即 究竟 哪 种 样式 设置 有 效 。 


TAIRA FS ARR ICR: 内 嵌 优 先 级 大 于 链接 优先 级 ; 链接 优先 级 大 于 导入 优 
先 级 。 
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NA 
4.2 CSS3 基础 语 ; 
— 


4.2.1 CSS3 选择 器 
HTML 中 的 所 有 标记 都 是 通过 不 同 的 CSS 选择 器 (selector) 进 行 控制 的 。 
1. 标签 选择 器 


HTML 文档 是 由 多 个 不 同 标记 组 成 ,而 CSS 选择 器 就 是 声明 哪些 标记 采用 样式 。 例 
如 ,p 选择 器 就 是 用 于 声明 页 面 中 所 有 二 p 二 标记 的 样式 风格 。 
标签 选择 器 的 基本 形式 如 下 : 


tagname{ property:value} 


其 中 ,tagname 表示 标记 名 称 , 如 p. hl 等 HTML 标记 ; property 表示 CSS3 属性 ; 
value 表示 属性 值 。 

通过 一 个 具体 标记 来 命名 ,可 以 对 文档 里 这 个 标记 出 现 的 每 一 个 地 方 应 用 样式 定义 。 
这 种 做 法 通常 用 在 设置 那些 在 整个 网 站 中 都 会 出 现 的 基本 样式 。 

【 例 4.5】 标签 选择 器 实例 。 

< html > 

<head > 

<title> 标 签 选择 器 </title> 

< style> 

p{color:blue; font - size:20px;] 

</style> 

</head> 

<body> 

<p> 此 处 使 用 标签 选择 器 控制 段落 样式 </p> 

</body > 

</html> 


在 浏览 器 中 的 浏览 效果 如 图 4. 12 所 示 。 
2. 类 选择 器 


在 一 个 页 面 中 ,使 用 标签 选择 器 ,会 控制 该 页 面 中 所 有 此 标记 的 显示 样式 。 如 果 需 要 为 
此 类 标记 中 其 中 一 个 标记 重新 设 定 ,此 时 仅 使 用 标签 选择 器 是 不 能 达到 效果 的 ,需要 使 用 类 
(class) 选 择 器 。 

类 选择 器 用 来 为 一 系列 标记 定义 相同 的 呈现 方式 ,常用 语法 格式 如 下 : 


.classvalue(property:value] 
其 中 ,classvalue 是 选择 器 的 名 称 。 例 如 : 


.rd{color:red} 
.se{font — size:3px] 
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此 处 使 用 标签 选择 器 控制 段落 样式 











图 4.12 浏览 器 显示 效果 


上 面 定义 了 两 个 类 选择 器 ,分 别 为 rd 和 se。 类 的 名 称 可 以 是 任意 英文 字符 串 或 以 英文 
开头 与 数字 的 组 合 ,一 般 情 况 下 ,是 其 功能 及 效果 的 简写 。 
可 以 使 用 p 标记 的 class 属性 来 引用 类 选择 符 ,其 使 用 示例 如 下 : 


« p class = "rd"> class 属性 是 被 用 来 引用 类 选择 器 的 属性 .</p> 


这 样 ,前 面 定义 的 选择 器 就 被 应 用 于 指定 的 标记 p 中 。 如 果 需 要 在 不 同 标记 中 使 用 相 
同 的 呈现 方式 ,如 下 所 示 : 


<p class = "rd"> 段 落 样式 </p> 
« h3 class = "rd"> 标 题 样式 </h3 > 


[914.6] 类 选择 器 实例 。 


<html> 
<head> 
<title> 类 选择 器 </title> 
«style» 
.aa( 
color:blue; 
font - size:20px; 
) 
.bb{ 
color:red; 
font- size:22px; 
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</style> 

</head> 

<body> 

<h3 class = bb> 学 习 类 选择 器 </h3 > 

<p class = "aa"> 此 处 使 用 类 选择 器 aa 控制 段落 样式 </p> 
«p class = "bb"> 此 处 使 用 类 选择 器 bb 控制 段落 样式 </p> 
</body> 

</html> 


在 浏览 器 中 显示 效果 如 图 4. 13 所 示 。 


E TEE si-a x 
一 WISSEN H) : 
€ || € || f || | filez//H/9E3/ch04/4.2.htm $ y See RIENE 


Duw- Dans Dpeickx DAMES 门人 RR 了 B Chis Sh f Kerbero 
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学 习 类 选择 器 
此 处 使 用 类 选择 器 aa 控制 段落 样式 
此 处 使 用 类 选择 器 bb 控制 段落 样式 




















图 4.13 浏览 器 显示 效果 


3. ID 选择 器 


ID 选择 器 和 类 选择 器 类 似 , 都 是 针对 特定 属性 的 属性 值 进行 匹配 。ID 选择 器 定义 的 
是 某 个 特定 的 HTML 元 素 , 一 个 网 页 文件 中 只 能 有 一 个 元 素 使 用 某 一 个 ID 的 属性 值 。 
其 基本 语法 格式 如 下 : 


# idvalue( property: value} 


其 中 ,idvalue 是 选择 器 名 称 。 具 体 使 用 如 下 示例 : 


#fontstyle 

{ 

Color:red; 

Font - size:large; 
Font — weight:bold 
) 


9849 cssttst pb Fe LXI 


在 页 面 中 ,具有 ID 属性 的 标记 才能 使 用 TD 选择 器 定义 样式 ,所 以 与 类 选择 器 相 比 ,使 
用 ID 选择 器 是 有 一 定局 限 性 的 。 类 选择 器 与 ID 选择 器 主要 有 以 下 两 点 区 别 。 

CD 类 选择 器 可 以 给 人 以 数量 的 标记 定义 样式 ,但 ID 选择 器 在 页 面 的 标记 中 只 能 使 用 
一 次 。 虽 然 在 很 多 浏览 器 下 ,ID 选择 器 用 于 多 个 标记 时 也 能 正确 显示 样式 ,但 这 种 使 用 方 
式 是 错误 的 。 因 为 每 个 标记 定义 的 ID 不 只 是 CSS 可 以 调用 ,JavaScript 等 脚本 语言 同样 也 
可 以 调用 。 如 果 一 个 HTML 中 有 两 个 相同 ID 的 标记 ,那么 将 会 导致 JavaScript 在 查找 ID 
时 出 错 。 

(2) ID 选择 器 比 类 选择 器 具有 更 高 的 优先 级 。 

[914.7] ID 选择 器 实例 。 


<html > 
<head> 
«title» ID 选择 器 </title> 
< style> 
# fontstyle{ 

color: blue; 

font — weight : bold; 
} 
# textstyle( 

color: red; 
font - size: 22px; 

} 
</style> 
</head> 
< body> 
<h3 id= textstyle»^£2] ID 选择 器 </h3 > 
<p id= textstyle> 此 处 使 用 ID 选择 器 aa 控制 段落 样式 </p> 
<p id= fontstyle> 此 处 使 用 ID 选择 器 bb 控制 段落 样式 </p> 
</body> 
«/htnl» 


在 浏览 器 中 显示 效果 如 图 4. 14 所 示 。 

4. 全 局 选择 器 

如 果 想 要 一 个 页 面 中 所 有 HTML 标记 都 使 用 同一 种 样式 ,可 以 使 用 全 局 选择 器 。 其 
语法 格式 为 : 

* (property:value] 

其 中 ,* 表示 对 所 有 元 素 起 作用 。 使 用 示例 如 下 : 

* (nargin:0;padding:0;) 

【 例 4.8】 全 局 选择 器 实例 。 


<html> 
<head> 


<title> 全 局 选择 器 </title> 
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< style> 
*( 
color:red; 
font — size:30px 
} 
</style> 
</head> 
<body> 
<p> 使 用 全 局 选择 器 修饰 </p> 
<p> 第 一 段 </p> 
«hl > 第 一 段 标题 </hl > 
</body> 
</html> 
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学 习 ID 选 择 器 

此 处 使 用 ID 选择 器 aa 控制 段落 样式 

此 处 使 用 ID 选择 器 bb 控制 段落 样式 








图 4.14 浏览 器 显示 效果 


在 浏览 器 中 的 显示 效果 如 图 4. 15 所 示 。 

5. 组 合 选择 器 

组 合 选择 器 只 是 一 种 组 合 形式 ,并 不 算是 一 种 真正 的 选择 器 ,但 在 实际 中 经 常 使 用 ,其 
使 用 示例 如 下 : 


.orderlist li( *** } 
.tableset td( *** } 


在 使 用 时 一 般 用 在 重复 出 现 并 且 样 式 相同 的 一 些 标签 里 ,如 1 列表 、ID 单元 格 和 dd Fl 
定义 列表 等 。 
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图 4.15 浏览 器 显示 效果 


【 例 4.9】 组 合 选择 器 实例 。 


<html > 
<head> 
<title> 组 合 选择 器 </title> 
<style> 
pf 
color:red 
) 
p.firstPar{ 
color:blue 
} 
. firstPar{ 
color:green 
} 
</style> 
</head> 
<body> 
<p> 这 是 普通 段落 </p> 
<p class = "firstPar"> 此 处 使 用 组 合 选择 器 </p> 
< hl class = "firstPar"> 我 是 一 个 标题 </hl > 
</body> 
</html> 


在 浏览 器 中 显示 效果 如 图 4. 16 所 示 。 
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图 4.16 浏览 器 显示 效果 


6. 继承 选择 器 


继承 选择 器 的 规则 是 , 子 标记 在 没有 定义 的 情况 下 所 有 的 样式 是 继承 父 标 记 的 , 当 子 标 
记 重 复 定 义 了 父 标 记 已 经 定义 过 的 声明 时 , 子 标 记 就 执行 后 面 的 声明 ,与 父 标 记 不 冲突 的 地 
方 仍然 沿用 父 标记 的 声明 。 使 用 示例 如 下 : 

<div class= "text"> 


<span>< img src="x * *" alt=" 示 例 图 片 "”></span> 
</div> 


对 于 上 面 层 而 言 ,如 果 其 修饰 样式 为 下 面 的 代码 : 

.text span ing(border:lpx blue solid; } 
则 表示 该 选择 器 先 找到 class 为 text 的 标记 ,再 从 它 的 子 标记 里 查找 span 标记 ,再 从 span 
的 子 标记 中 找到 img 标记 。 也 可 以 采用 下 面 的 形式 : 

div span img {border:1px blue solid;} 

【 例 4.10】 继承 选择 器 实例 。 


<html> 

<head> 

< title > 继承 选择 器 </title> 

< style type = "text/css"> 

hi{color:red; text — decoration:underline;} 
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hl strong(color: #004400; font- size:40px;] 
</style> 

</head> 

< body> 

< hl > 测试 CSS 的 < strong > 继承 </strong > 效果 </hl > 
< hl > 此 处 使 用 继承 < font > 选择 器 </font > 了 么 ?</hl > 











</body> 
</html> 
在 浏览 器 中 的 效果 如 图 4. 17 所 示 。 
G ortnamn e >Q x* mS ce IA we " 一 5 x 
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图 4.17 浏览 器 显示 效果 
7. 伪 类 


伪 类 也 是 选择 器 的 一 种 ,但 用 伪 类 定义 的 CSS 样式 并 不 是 作用 在 标记 上 ,而 是 作用 在 
标记 的 状态 上 。 伪 类 包括 : first-child, : link, :vistited, : hover, :active, :focus 和 :lang 等 。 

其 中 有 一 组 伪 类 是 主流 浏览 器 者 支持 的 ,就 是 超级 链接 标记 二 a 二 的 伪 类 ,包括 : link 
(未 访问 链接 )、: vistited( 已 访问 链接 )、:hover( 鼠 标 停留 在 链接 上 ) 和 :active( 激 活 链接 ) 。 
使 用 示例 如 下 : 

a:link(color: # ff0000; text- decoration:none} 

a:visited(color: # 00ff00; text- decoration:none} 


a:hover{color: #0000ff; text- decoration: underline} 
a:active{color: # ff00ff; text- decoration: underline} 


【 例 4.11) 伪 类 实例 。 


<html> 


<head> 

<title >fh3</title> 
<style> 

a:link {color: red} 
a:visited {color: green} 
a:hover {color:blue} 


a:active {color: orange} 
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/* 未 访问 的 链接 * / 
/* 已 访问 的 链接 * / 


/* 鼠标 移动 到 链接 上 * / 


/* 选 定 的 链接 * / 


</style> 

</head> 

<body> 

<a href = ""> 链 接 到 本 页 </a> 

<a href = "http://www. sohu. com"> 搜 狐 </a> 
</body> 

</html> 


在 浏览 器 中 的 效果 如 图 4. 18 所 示 。 鼠 标 停留 在 超级 链接 上 时 显示 颜色 为 蓝 色 ; 访问 
过 后 显示 颜色 为 绿色 。 
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图 4.18 浏览 器 显示 效果 

8. 属性 选择 器 

属性 选择 器 即 直接 使 用 属性 控制 HTML 标记 样式 。 它 是 根据 某 个 属性 是 否 存在 或 属 
性 值 来 寻找 元 素 , 因 此 能 够 实现 某 些 非常 有 意思 和 强大 的 效果 。 在 CSS3 版 本 中 ,常用 的 属 


性 选择 器 如 表 4. 1 所 示 。 
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表 4.1 CSS3 属性 选择 器 








格 xX m oH 
E[ foo] 选择 匹配 下 的 元 素 , 且 该 元 素 定义 了 foo 属性 。 注 意 ,E 选择 器 可 以 省 略 , 表 示 选 择 定 
MT foo 属性 的 任意 类 型 元 素 
E[foo—"bar"] ”选择 匹配 EE 的 元 素 , 且 该 元 素 将 foo 属性 值 定义 为 "bar"。 注 意 ,E 选择 器 可 以 省 略 , 用 


E[foo— — "bar" ] 


E(foo| —"en" 


E[foo ^— "bar" ] 


E[ foo $ — "bar" ] 


E[foo * —"bar"] 


[5i 4. 12] 


<html> 
<head> 


法 与 上 一 个 选择 器 类 似 

选择 匹配 E 的 元 素 , 且 该 元 素 定义 了 foo 属性 ,foo 属性 值 是 一 个 以 空格 符 分 隔 的 列 
表 , 其 中 一 个 列表 的 值 为 "bar"。 注 意 ,E 选择 符 可 以 省 略 , 表 示 可 以 匹配 任意 类 型 的 
元 素 。 

例如 : a[ title — "b1" DE Re —a title— "bl b2 b3"—— /a- ,而 不 匹配 a title="b2 b3 
b5"></a> 

选择 匹配 E 的 元 素 , 且 该 元 素 定义 了 foo 属性 ,foo 属性 值 是 一 个 用 连 字 符 (-) 分 隔 的 
列表 , 值 开头 的 字符 为 "en"。 注 意 ,E 选择 符 可 以 省 略 , 表 示 可 以 匹配 任意 类 型 的 元 
素 。 例 如 : [lang| — "en" ]VC Ri — body lang— "en-us" — — / body ,而 不 是 匹配 二 body 
lang "f-ag" ></body> 

选择 匹配 E 的 元 素 , 且 该 元 素 定 义 了 foo 属性 ,foo IR tE S I BA" bar" BJ FF FF 
串 。 注 意 ,E 选择 符 可 以 省 略 , 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 : body[ lang ^= 
"en" JDC Ri — body lang= "en-us" 7 — / body ,而 不 匹配 二 body lang= "f-ag" ></body> 
选择 匹配 E 的 元 素 , 且 该 元 素 定义 了 foo 属性 ,foo 属性 值 包含 后 缀 为 "bar" 的 子 字符 
串 。 注 意 下 选择 符 可 以 省 略 ,表示 可 以 匹配 任意 类 型 的 元 素 。 例 如 : img[src $ = 
"jpg" JVC Ri — img src— "p. jpg" /二 ,而 不 匹配 一 img src 一 "p. gif"/> 

选择 匹配 E 的 元 素 , 且 该 元 素 定义 了 foo 属性 ,foo 值 包 含 "b" 的 子 字符 串 。 注 意 下 选 
择 符 可 以 省 略 , 表 示 可 以 匹配 任意 类 型 的 元 素 。 例 如 : img[src* 一 "jpg"] 匹 配 <<img 
src— "p. jpg" /7 ,而 不 匹配 <img src— "p. gif"/> 


属性 选择 器 实例 。 


<title> 属 性 选择 器 </title> 


<style> 


[align]{color:red} 


[align = "left" ] {font - size:20px;font — weight: bolder; } 
[lang ^ = "en" ] {color :blue; text - decoration: underline; } 
[src $ = "gif" ] {border — width: 5px; boder - color: # ££9900} 
</style> 

</head> 

< body> 

<p align= center> 这 是 使 用 属性 定义 样式 </p> 

<p align = left > 这 是 使 用 属性 值 定义 样式 </p> 

<p lang= "en- us"> 此 处 使 用 属性 值 前 缀 定义 样式 </p> 
<p> 下 面 使 用 了 属性 值 后 级 定义 样式 

< img src = "2.gif" border = "1"/> 

</body> 

</html > 


在 浏览 器 中 的 效果 如 图 4. 19 所 示 。 
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下 面 使 用 了 属性 值 后 撮 定 义 样式 [3] 





图 4.19 浏览 器 显示 效果 


. 结构 伪 类 选择 器 


结构 伪 类 是 CSS3 新 增 的 类 型 选择 器 。 即 利用 文档 结构 树 (DOM) 实 现 元 素 过 滤 , 通 俗 
地 说 ,就 是 通过 文档 结构 的 相互 关系 来 匹配 特定 的 元 素 , 从 而 减少 文档 内 对 class 属性 和 ID 
属性 的 定义 ,使 得 文档 更 加 简洁 。 

常见 结构 伪 类 选择 器 如 表 4. 2 所 示 。 


表 4.2 常见 结构 伪 类 选择 器 





选 择 器 含 x 
E:root 匹配 文档 的 根 元 素 , 对 于 HTML 文档 ,就 是 HTML 元 素 
E:nth-child(n) 匹配 其 父 元 素 的 第 n 个 子 元 素 ,第 一 个 编号 为 1 
E;nth-last-child(n) 匹配 其 父 元 素 的 倒数 第 n 个 子 元 素 ,第 一 个 编号 为 1 
E:nth-of-type(n) 与 :nth-child() 作 用 类 似 , 但 是 仅 匹 配 使 用 同 种 标签 的 元 素 
E:nth-last-of-type(n) ”与 :nth-last-child() 类 似 ,但 是 仅 匹配 使 用 同 种 标签 的 元 素 
E:last-child 匹配 父 元 素 的 最 后 一 个 子 元 素 ,等 同 于 : nth-last-child(1) 
E: first-of-type 匹配 父 元 素 下 使 用 同 种 标签 的 第 一 个 子 元 素 , 等 同 于 : nth-of-type(1) 
E:last-of-type 匹配 父 元 素 下 使 用 同 种 标签 的 最 后 一 个 子 元 素 , 等 同 于 : nth-last-of-type(1) 
E:only-child 匹配 父 元 素 下 仅 有 的 一 个 子 元 素 , 等 同 于 : first-child: last-child 或 nth-child(1) ; 


nth-last-child(1) 


E:only-of-type 匹配 父 元 素 下 使 用 同 种 标签 的 唯一 一 个 子 元 素 ,等 同 于 : first-of-type: last-of- 


type 或 : nth-of-type(1) nth-last-of-type(1) 


E:empty 匹配 一 个 不 包含 任何 子 元 素 的 元 素 , 注 意 文本 结 点 也 被 看 作 子 元 素 
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【 例 4.13]. 结构 伪 类 选择 器 实例 。 


<html> 

<head> 

< title >4 fy fh38</title> 

<style> 

tr:nth- child(even) { 

background - color: # f5fafe 

) 

tr:last - child(font - size:20px; } 

«/style» 

</head> 

< body> 

< table border = 1 width = 80 % > 

<th> 姓 名 </th>< th> 编 号 </th>< th> 性 别 </th> 

<tr><td> 刘 海松 </td><td> 006 </td>< td> 男 </td></tr> 
<tr><td> 王 峰 </td>< td> 001 </td>< td> 女 </td></tr> 
<tr>< td> 李 张力 </td><td> 002 «/td»« td> 男 </td></tr> 
<tr><td> 于 辉 </td>< td» 008 </td>< td> 男 </td></tr> 
<tr>< td> 张 浩 </td>< td» 004 </td>< td> 女 </td></tr> 
<tr><td> 刘 永 权 </td>< td» 003 </td>< td> 男 </td></tr> 
</table> 

</body> 

</html > 


浏览 器 的 效果 如 图 4. 20 所 示 。 
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4.20 浏览 器 显示 效果 
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10. U 元 素 状态 伪 类 选择 器 


UI 元 素 状 态 伪 类 也 是 CSS3 新 增 选 择 器 。 其 中 ,UI 即 User Interface( 用 户 界面 ) 的 缩 
写 。UI 设 计 则 是 对 软件 的 人 机 交互 、 操 作 逻 辑 . 界 面 美观 的 整体 设计 。 好 的 UI 设计 不 仅 
要 使 软件 变 得 有 个 性 品味 ,还 要 让 软件 的 操作 变 得 舒适 、 简 单 .自由 ,充分 体现 软件 的 定位 和 

UI 元 素 的 状态 一 般 包 括 可 用 、 不 可 用 、 选 中 、 未 选中 、 获 得 焦点 、 失 去 焦点 、 锁 定 、 待 机 
等 。CSS3 定义 了 三 种 常见 的 状态 伪 类 选择 器 ,详细 说 明 如 表 4. 3 所 示 。 


R43 UI 元 素 状态 伪 类 表 


选择 器 说 明 

E:enabled ”选择 匹配 下 的 所 有 可 用 UI 元 素 。 注 意 , 在 网 页 中 ,UI 元 素 一 般 是 指 包 含 在 form 元 素 内 
的 表单 元 素 。 例 如 : input: enabled VE Ad — form — input type= text/>< input type= 
button disabled— "disabled" /></form> f& 88 P ff SCAR HE , TAR Uc Bo AR SP 05 sz £r] 

E:disabled ”选择 匹配 下 的 所 有 不 可 用 元 素 。 注 意 ,在 网 页 中 ,UI 元 素 一 般 是 指 包含 在 form 元 素 内 的 
表单 元 素 。 例 如 : input: disabled VC Ad <form ><input type = text/> <input type = 
button disabled— "disabled" / 7 — / form 4R 83 rf AY 4 il , ifii AR DE Be 83 rh 69 fc E 

E:checked ”选择 匹配 下 的 所 有 可 用 UI 元 素 。 注 意 , 在 网 页 中 ,UI 元 素 一 般 是 指 包 含 在 form 元 素 内 
的 表单 元 素 。 例 如 : input:checked UE Ri — form — input type=checkbox/><input type= 
radio checked = "checked" / 7 — / form f& 88 rh (f A i f £I. ,而 不 匹配 代码 中 的 按钮 








【 例 4.14]. UL 元 素 状态 伪 类 选择 器 实例 。 


<html> 

<head> 

«title» UI 元素 状态 伪 类 选择 器 </title> 

< style> 

input:enabled { border:lpx dotted + 666; background: # ££9900; } 
input: disabled { border: 1px dotted #999; background: # F2F2F2; } 
</style> 

</head> 

< body> 

<center> 

« h3 align = center > 用 户 登 录 </h3> 

< form method = "post" action = ""> 

JAP! % : <input type = text name = name>< br» 

9% &nbsp; &nbsp; li]: < input type = password name = pass disabled = "disabled">< br > 
< input type = submit value = 提交 > 

< input type = reset value = Ó Ei 

</form> 

<center> 

</body > 

</html> 


在 浏览 器 中 的 显示 效果 如 图 4. 21 所 示 。 
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fd 4.21 浏览 器 显示 效果 


4.2.2 选择 器 声明 
1. 集体 声明 


在 一 个 页 面 中 ,有 时 不 同 的 标记 样式 要 保持 一 致 。 例 如 ,p 标记 和 hl 标记 要 保持 一 致 ， 
此 时 可 以 将 p 标记 和 hl 标记 共同 使 用 类 选择 器 ,除了 这 个 方法 外 ,还 可 以 使 用 集体 声明 方 
法 。 集 体 声明 就 是 在 声明 各 种 CSS 选择 器 时 ,如 果 某 些 选 择 器 的 风格 是 完全 相同 或 者 部 分 
相同 的 ,可 以 将 风格 相同 的 CSS 选择 器 同时 声明 。 

【 例 4.15】 集体 声明 实例 。 


<html> 

<head> 

< title > 集体 声明 </title> 
<style type = "text/css"> 
h1,h2, p{ 

color: red; 

font - size:20px; 

font - weight : bolder; 

} 

</style> 

</head> 

<body> 

<hl > 此 处 使 用 集体 声明 </hl > 
<h2 > 此 处 使 用 集体 声明 </h2 > 
<p> 此 处 使 用 集体 声明 </p> 
</body> 
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</html> 

在 浏览 器 中 的 效果 如 图 4. 22 所 示 。 
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此 处 使 用 集体 声明 
此 处 使 用 集体 声明 
此 处 使 用 集体 声明 








图 4.22 浏览 器 显示 效果 


2. SEREEN 


在 CSS 控制 HTML 标记 样式 时 ,还 可 以 使 用 层 层 递 进 的 方式 , 即 嵌 套 方式 ,对 指定 位 
PH HTML 标记 进行 修饰 。 例 如 , 当 一 p 二 与 一 /p 二 之 间 包 含 二 a 之 过 /a> 标 记 时 ,就 可 以 
使 用 这 种 方式 对 HTML 标记 进行 修饰 。 

[9514.16] si esc pl. 


<html> 

<head> 

<title>4 i ft E pH W</title> 

<style> 

p{ font - size:20px; } 

p a{color:red; font - size:30px; font - weight : bolder; } 
</style> 

</head> 

<body> 

<p Jé—/4- Z HK <a href = ""> 测 试 </a></p> 
</body> 

</html> 


在 浏览 器 中 的 效果 如 图 4. 23 所 示 。 


第 4 章 Css 样式 网 页 布局 规划 





E osema 62 > 外 cm IA we 时 - D x 

€ || O| ||) files//H:/HB/ch04/4.12.hur ty B. Q 

bae- [Hs Gene DARES 门人 CR 了 B Chis sh S Kerbero 
md x 


x —45s 5x ll A 








图 4.23 浏览 器 显示 效果 


4.2.3 CSS3 常用 单位 


1. 颜色 单位 


通常 颜色 用 于 设 定 字 体 以 及 显示 背景 色 。 在 CSS3 中 颜色 设置 的 方法 很 多 ,有 以 下 几 
种 方式 。 

1) 命名 颜色 

CSS3 可 以 直接 用 英文 单词 命名 与 之 相应 的 颜色 ,这 种 方法 最 简单 直接、 容易 掌握 。 
如 red yellow,black.green 等 。 例 如 : 


P{color:red} 


2) RGB 色彩 模式 

使 用 RGB 颜色 的 格式 必须 使 用 rgb(R.G、B) .其 中 ,R、G、B 分 别 表示 红 、 绿 、 蓝 的 十 进 
制 值 ,其 取 值 范围 为 0 一 255 ,通过 这 三 个 值 的 变化 组 合 便 可 形成 不 同 的 颜色 。 

RGB 设置 方式 一 般 分 为 两 种 : 百分比 设置 和 直接 用 数值 设置 。 例 如 : 


p{color:rgb(123, 0,25)} 
p{color:rgb(45% ,0% ,25% )} 


3) 十 六 进 制 颜色 


十 六 进 制 颜色 是 最 常用 的 定义 方式 。 其 基本 格式 为 # RRGGBB, 其 中 R 表示 红色 ,G 
表示 绿色 ,B 表示 蓝 色 。 而 RR.GG.BB 最 大 值 为 FF ,表示 十 进 制 中 的 255; 最 小 值 为 00， 
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表示 十 进 制 中 的 0。 例如 : 
p(color:ffff00) 


4) HSL 色彩 模式 

HSL 色彩 模式 是 工业 界 的 一 种 颜色 标准 , 它 通 过 对 色调 (H) ,饱和 度 (S) EHEC = 
颜色 通道 的 改变 以 及 它们 相互 之 间 的 琶 加 来 获得 各 种 颜色 。 

在 CSS3 种 ,HSL 色彩 模式 的 表示 语法 如 下 : 


hsl(« length>,< percentage >,< percentage >) 
其 中 ,length 表示 色调 ,可 以 取 任 意 数 值 , 取 值 范围 为 0 一 360。 第 一 个 percentage 表示 


饱和 度 , 取 值 范围 为 0~100%。 第 二 个 percentage 表示 亮度 , 取 值 范围 为 0 一 100%% 。 
其 使 用 示例 如 下 : 





p{color:hs1(10,80% ,80% );} 


5) HSLA 色彩 模式 

HSLA 是 HSL 色彩 模式 的 扩展 ,在 色相 、 饱 和 度 、 亮 度 三 要 素 的 基础 上 增加 了 不 透明 
度 参 数 。 其 语法 格式 如 下 : 

hsla(« length>,< percentage >,< percentage >,< opacity>) 


其 中 ,前 三 个 参数 与 hsl() 函数 的 参数 的 意义 和 用 法 相同 ,第 4 个 参数 二 opacity 二 表示 
不 透明 度 , 取 值 在 0 一 1 之 间 。 例 如 : 

p{color:hsla(10,80 % ,80% ,0.9);} 

6) RGBA 色彩 模式 

RGBA 是 RGB 色彩 模式 的 扩展 ,在 红 、 绿 、 蓝 三 原色 的 基础 上 增加 了 不 透明 度 参 数 。 
其 语法 格式 为 : 

rgba(r,g, b, « opacity>) 

使 用 示例 如 下 : 

p{color:rgba(23,128,52,0.9);} 


7) 网 络 安全 色 

网 络 安全 色 由 216 种 颜色 组 合 而 成 ,被 认为 在 任何 操作 系统 和 浏览 器 中 都 是 相对 稳定 
的 ,也 就 是 说 显示 的 颜色 是 相同 的 ,因此 ,这 216 种 颜色 被 称 为 网 络 安全 色 。 这 216 种 颜色 
都 是 由 红 绿 蓝 三 种 基本 色 从 0,51.102,153,204,255 这 6 个 数值 中 取 值 ,组 成 6X6X6 种 
颜色 。 


2. 长 度 单位 


CSS 中 ,长 度 单位 可 以 被 分 为 两 类 : 绝对 单位 和 相对 单位 。 
1) 绝对 单位 
CD 英寸 (in) : 英寸 对 于 国内 而 言 , 使 用 较 少 ,是 国外 常用 的 度量 单位 。1in 二 2. 54cm， 
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lcm 一 0. 394in 。 

(2) 厘米 (cm) : 可 以 用 来 设 定 距离 比较 大 的 页 面 元 素 框 。 

(3) 毫米 (mm) : 可 以 用 来 比较 精确 地 设 定 页 面 元 素 距离 或 大 小 。10mm 一 lcm。 

OD 磅 (pt) : 一 般 用 来 设 定 文字 的 大 小 。 它 是 标准 的 印刷 量度 ,广泛 应 用 于 打印 机 、 文 
字 程序 等 。72pt 一 lin 一 2. 54cm, 

(5) pica(pe): 是 另 一 种 印刷 量度 。1pica 二 12pt。 该 单位 不 常用 。 

2) 相对 单位 

相对 单位 是 指 在 量度 时 需要 参照 其 他 页 面 元 素 的 单位 值 。 使 用 相对 单位 所 量度 的 实际 
距离 可 能 会 随 着 这 些 单位 值 的 改变 而 改变 。CSS 提供 了 三 种 相对 单位 : emex 和 px, 

(1) em: 用 于 给 定 字 体 的 font-size 值 。 例 如 ,一 个 元 素 字体 大 小 为 12pt, 那 么 lem 就 
是 12pt; 如 果 该 元 素 字体 大 小 改 为 15pt, 则 lem 就 是 15pt。 简 单 来 说 ,lem 总 是 字体 的 大 
小 值 。em 的 值 总 是 随 着 字体 大 小 的 变化 而 变化 的 。 

例如 ,分 别 设 定 页 面 元 素 hl、h2 和 p 的 字体 大 小 为 20pt、15pt 和 10pt, 各 元 素 的 左边 距 
为 lem, 样 式 规则 如 下 : 

hi(font- size:20pt} 

h2(font- size:15pt} 

p{font - size:10pt} 

h1,h2, p(margin- left:1em} 

对 于 hl.lem 等 于 20pt; 对 于 h2.1em 等 于 15pt; X F p. lem 等 于 10pt, 所 以 em 的 值 
会 随 着 相应 元 素 字体 大 小 的 变化 而 变化 。 另 外 ,em 值 有 时 还 相对 于 其 上 级 元 素 的 字体 大 
小 。 例 如 ,上 级 元 素 字体 大 小 为 20pt, 设 定 其 子 元 素 字体 大 小 为 0. 5em, 则 子 元 素 显示 出 的 
字体 大 小 则 为 10pt。 

(2) ex: ex 是 以 给 定 字体 的 小 写字 母 “x” 高 度 作为 基准 的 ,对 于 不 同 字 体 来 说 ,小 写字 
母 “x” 高 度 是 不 同 的 ,所 以 ex 单位 的 基准 也 不 同 。 

(3) px: px 也 叫 像素 ,这 是 目前 使 用 最 为 广泛 的 一 种 单位 ,1px 也 就 是 屏幕 上 的 一 个 小 
方 格 。 由 于 显示 器 有 多 种 不 同 的 大 小 , 它 的 每 个 小 方 格 大 小 也 是 不 同 的 ,所 以 像素 单位 的 标 
准 也 都 不 一 样 。 


4.2.4 CSS 继承 


CSS 继承 指 的 是 子 标记 会 继承 父 标 记 的 所 有 样式 风格 ,并 可 以 在 父 标 记 样 式 风 格 的 基 
础 上 加 以 修改 ,产生 新 的 样式 ,而 子 标记 样式 风格 完全 不 会 影响 父 标记 。 
[8504.17] £i esc, 


<html> 

<head> 

<title> 多 重典 套 声明 </title> 
< style> 

p{font - size:20px;color:red] 
span(font - size:30px; } 
</style> 

</head> 
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<body> 

<p> 这 是 一 个 继承 < span > 测试 </span></p> 

</body> 

</html > 

浏览 器 中 的 效果 如 图 4. 24 所 示 。 
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图 4.24 浏览 器 显示 效果 


4.3 在 Dreamweaver 中 使 用 CSS 样式 


在 Dreamweaver 中 ,利用 CSS 样式 表 可 以 设置 丰富 的 样式 ,包括 文字 样式 .背景 样式 和 


边框 样式 等 各 种 常用 效果 ,这 些 样 式 决定 了 页 面 中 的 文字 、 列 表 、 背 景 .表单 图片 和 光标 等 
各 种 元 素 。 


4.3.1 Dreamweaver 中 的 样式 类 型 
在 Dreamweaver 中 ,CSS 主要 通过 CSS 样式 面板 实现 。 创 建新 的 CSS 规则 的 步 又 


如 下 。 


CD 选择 “窗口 ”1“CSS 样式 ”菜单 命令 ,打开 “CSS 样式 ”面板 ,如 图 4. 25 所 示 。 
(2) 在 “CSS 样式 ?面板 中 , 单 击 右 下 角 的 “新 建 CSS 规则 ”按钮 圈 , 打 开 “ 新 建 CSS 规 


则 ”对 话 框 ,如 图 4. 26 所 示 。 





(3) 在 该 对 话 框 中 ,可 以 定义 创建 的 CSS 样式 的 类 型 。 
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规则 定义 : 
Ed 选择 定义 规则 的 位 置 。 
ORES) = 
39 Arni] e795 
图 4. 25 “CSS 样式” 面板 4.26 “新 建 CSS 规则 ”对 话 框 
选择 器 类 型 有 以 下 几 种 。 
Q@@ “类 (可 应 用 于 任何 HTML 元 素 )”: 创建 一 个 可 作为 class 属性 应 用 于 任何 HTML 
元 素 的 自 定 义 样式 。 


@“ID( 仅 用 于 一 个 HTML 元 素 )”: 定义 包含 特定 ID 属性 的 标签 的 格式 。 可 以 从 * 选 
择 器 类 型 "弹出 菜单 中 选择 ID 选项 ,然后 在 “选择 器 名 称 ” 文 本 框 中 输入 唯一 ID。 

© “标签 ( 重 新 定义 HTML 元 素 )”: 重新 定义 特定 HTML 标签 的 默认 格式 设置 ,可 选 
择 重 新 定义 标签 。 

@ “符合 内 容 ( 基 于 选择 的 内 容 )”: 定义 同时 影响 两 个 或 多 个 标签 .类 或 ID 的 复合 规 
则 。 例 如 ,输入 DIV p, 则 DIV 标签 内 的 p 元 素 都 将 受 此 规则 的 影响 。 说 明文 本 区 域 准确 
说 明 用 户 添 加 或 删除 选择 器 时 该 规则 将 影响 哪些 元 素 。 

选择 器 名 称 : 类 名 称 必 须 以 句点 开头 ,可 以 包含 任何 字母 和 数字 的 组 合 ( 如 
. mystyle) 。 如 果 没 有 输入 开头 的 句点 ,Dreamweaver 会 自动 添加 ; ID % MMA" + "IF 
头 , 可 以 包含 任何 字母 和 数字 的 组 合 ( 如 #myID) ,如果 没 有 输入 开头 的 “#”,Dreamweaver 
会 自动 添加 。 

规则 定义 : 选中 “ 仅 限 该 文档 ”选项 , 则 定义 的 CSS 规则 只 对 当前 文档 起 作用 ,不 保存 编 
辑 的 样式 ; 选中 “新 建 样 式 表 文 件 ” 选 项 ,可 以 定义 一 个 外 部 链接 的 CSS 样式 。 


4.3.2 CSS 类 型 设置 


在 “新 建 CSS 规则 ”对 话 框 中 设置 所 需 的 样式 后 , 单 击 “ 确 定 ” 按 钮 ,打开 CSS 规则 定义 
对 话 框 。 在 该 对 话 框 中 ,可 以 设置 样式 属性 ,其 中 定义 样式 最 常 使 用 的 属性 包含 在 “类 型 " 选 
项 面板 中 ,如 图 4.27 所 示 。 

(D Font-family( 字 体 ): 在 下 拉 列 表 中 可 以 选择 当前 样式 所 用 的 字体 ,设置 以 逗号 分 
开 的 字体 名 称 列表 。 当 浏览 器 解析 执行 时 ,会 将 所 列 字体 按 顺序 从 前 到 后 选择 , 即 当 客户 机 
中 没有 第 一 个 字体 时 ,浏览 器 自动 利用 第 二 种 字体 ,以 此 类 推 。 
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图 4.27 “类 型 "选项 面板 


(2) Font-size( 字 号 ): 在 列表 中 设置 字体 的 字号 。 可 以 选择 或 输入 具体 的 数值 ,也 可 以 
指定 绝对 大 小 的 字号 ; 如 果 选 择 大 或 小 之 类 的 选项 , 则 设置 的 是 字体 的 相对 大 小 。 如 果 要 
设置 字体 的 绝对 大 小 , 则 需要 在 其 右 侧 的 下 拉 列 表 中 选择 单位 。 

(3) Font-style( 文 字样 式 ) : 在 下 拉 列 表 中 选择 字体 的 格式 。 可 以 选择 normal( 正 常 )、 
italic BHA) BK oblique fi BHA) HH 

(4) Line-height £T 58) : 通常 情况 下 ,浏览 器 会 用 单行 距离 。 在 该 下 拉 列 表 中 ,可 以 选 
择 文本 的 行 高 , 若 选择 normal( 正 常 ) 选 项 , 则 由 系统 自动 计算 行 高 和 字体 大 小 ; 如 果 和 希望 具 
体 指定 行 高 值 ,在 其 中 输入 需要 的 数值 ,然后 选择 单位 即 可 。 

(5) Text-decoration( 文 字 修饰 ): 在 该 区 域 可 以 设置 字体 的 修饰 格式 ,包括 underline 
(下 划 线 ) overline( 上 划 线 ) \line-through( 删 除 线 ) 和 blink( 闪 烁 线 ) 等 。 在 默认 状态 下 , 普 
通 文本 的 修饰 格式 为 none( 无 ) ,超级 链接 的 修饰 格式 为 underline( 下 划 线 ) 。 

(6) Font-weight( 字 体 粗细 ): 在 该 下 拉 列 表 中 指定 字符 的 粗细 。 选 择 或 输入 数值 ,可 
以 指定 字体 的 绝对 粗细 程度 ; 使 用 bolder 和 lighter 值 可 得 到 比 父 元 素 字体 更 粗 或 更 细 的 
字体 。 

(7) Font-variant( 字 体 变 形 ) : 在 该 下 拉 列 表 中 设置 字体 的 变 体形 式 。 可 以 选择 所 需 字 
体 的 某 种 变形 。 这 个 属性 的 默认 值 是 normal, 表 示 字 体 的 常规 版 本 。 也 可 以 指定 small- 
caps 来 选择 字体 的 形式 ,在 这 个 形式 中 ,小 写字 母 都 会 被 蔡 换 为 小 的 大 写字 母 。 但 在 文档 
窗口 中 不 能 直接 看 到 设置 结果 ,必须 在 浏览 器 中 才能 看 到 效果 。 

(8) Textrtransform( 文 字 大 小 写 ) : 在 该 下 拉 列 表 中 设置 字符 的 大 小 写 方式 。 如 果 选 
择 capticalize( 首 字母 大 写 ) 选 项 , 则 可 以 指定 将 每 个 单词 的 第 一 个 字母 大 写 ; 如 果 选 择 
uppercase( 大 写 ) 或 lowercase( 小 写 ) 选 项 , 则 可 以 分 别 将 所 有 被 选择 的 文本 都 设置 为 大 写 
或 小 写 ; 如 果 选 择 none( 无 ) 选 项 , 则 保持 字符 本 身 原 有 的 大 小 写 格 式 。 

(9) Color( 颜 色 ): 单 击 该 按钮 ,可 以 打开 色 板 ,设置 CSS 样式 的 字符 颜色 。 
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4.3.3 CSS 背景 设置 


利用 样式 表 不 仅 可 以 设置 整个 文档 的 背景 ,还 可 以 设置 特定 部 分 的 背景 色 或 背景 图 像 。 
插 和 人 背景 图 像 时 ,可 以 指定 背景 图 像 的 位 置 或 重复 方式 、 固 定 与 否 等 。 在 “新 建 CSS 规则 ” 
对 话 框 中 设置 所 需 的 样式 后 , 单 击 * 确 定 ? 按 钮 ,打开 CSS 规则 定义 对 话 框 。 在 该 对 话 框 的 
“背景 ?选项 面板 中 可 以 定义 背景 样式 ,如 图 4. 28 所 示 。 
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图 4.28 “背景 "选项 面板 


(1) Background-color( 背 景 颜色 ) : 用 来 设 定 页 面 背 景色 。 

(2) Background-image( 背 景 图 像 ) : 用 来 设 定 页 面 背景 图 像 。 单 击 “ 浏 览 ” 按 钮 可 以 在 
对 话 框 中 选择 图 像 源 文 件 。 

(3) Background-repeat( 背 景 重复 ): 用 于 设 定 使 用 图 像 当 背景 时 重复 显示 的 形式 ,一 
般 用 于 图 片面 积 小 于 页 面 元 素面 积 的 时 候 。 共 有 4 个 选项 : no-repeat( 不 重复 ) 表 示 只 在 应 
用 样式 的 元 素 前 端 显示 一 次 该 图 像 ; repeat( 重 复 ) 表 示 在 应 用 样式 的 元 素 背景 上 的 水 平方 
向 和 垂直 方向 上 均 重 复 显示 该 图 像 ，repeat-x( 横 向 重复 ) 表 示 在 应 用 样式 的 元 素 背 景 上 的 
水 平方 向 上 重复 显示 该 图 像 ; repeat-y( 纵 向 重复 ) 表 示 在 应 用 样式 的 元 素 背 景 上 的 垂直 方 
向 上 重复 显示 该 图 像 。 

(4) Background-attachment( 背 景 固定 ): 其 中 的 fixed( 固 定 ) 与 scroll( 滚 动 ) 选 项 用 来 
设 定 对 象 的 背景 图 像 是 随 对 象 内 容 滚 动 的 还 是 固定 的 。 

(5) Background-position(X)( 水 平 位 置 )/ Background-position Y) (垂直 位 置 ): 用 于 
指定 背景 图 像 相 对 于 应 用 样式 的 元 素 的 水 平 位 置 或 垂直 位 置 。 可 以 选择 left( 左 对 齐 )、 
right( 右 对 齐 )、center( 居 中 对 齐 ) 或 top( 顶 部 对 齐 ) .bottom( 底 部 对 齐 ) 选 项 ,也 可 以 直接 输 
和 数值。 如果 前 面 的 附件 选项 设置 为 fixed, 则 元 素 的 位 置 是 相对 于 文档 窗口 ,而 不 是 元 素 
本 身 的 。 可 以 为 Background-position 属性 指定 一 个 或 两 个 值 , 如 果 用 的 是 一 个 值 , 它 将 同 
时 应 用 于 水 平和 垂直 位 置 ; 如 果 是 两 个 值 ,那么 第 一 个 值 表示 水 平 偏 移 ,第 二 个 值 表示 垂直 
偏 移 。 
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默认 情况 下 ,能 够 识别 样式 的 浏览 器 将 从 分 配 的 显示 区 域 的 左上 角 开 始 放置 背景 图 像 ， 
并 将 图 像 平 铺 至 同一 区 域 的 右 下 角 。 


4.3.4 CSS 区 块 设置 


选择 规则 定义 对 话 框 左 侧 的 “区 块 ”选项 ,在 右 侧 选项 面板 中 可 以 对 字 间 距 及 排列 方式 
进行 设置 ,如 图 4. 29 所 示 。 
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图 4.29 “区 块 ?选项 面板 


(1) Word-spacing( 单 词 间 距 ) : 在 字 与 字 之 间 增 加 更 多 的 空 阶 , 可 以 在 单词 之 间 添 加 额 
外 的 间距 。 可 以 输入 一 个 值 ,然后 在 右 侧 的 下 拉 列 表 中 选择 数值 的 单位 ,但 这 要 根据 浏览 器 
决定 ,很 多 浏览 器 并 不 支持 负 值 。 

(2) Letter-spacing( 字 母 间 距 ): 调整 字符 之 间 的 间距 。 与 单词 间距 的 设置 相同 ,此 选 
项 也 可 以 在 字符 之 间 添 加 额外 的 间距 。 用 户 可 以 输入 一 个 值 ,然后 在 右 侧 的 下 拉 列 表 中 选 
择 数 值 的 单位 ,但 这 要 根据 浏览 器 决定 ,很 多 浏览 器 并 不 支持 负 值 。 另 外 ,字母 间距 的 优先 
级 高 于 单词 间距 。 

(3) Vertical-align ift LXI E) : 调整 页 面 元 素 的 垂直 位 置 , 多 数 情 况 下 要 参照 其 父 对 象 
的 位 置 。 

(4) Textralign( 文 本 对 齐 ) : 文本 相对 页 边 的 调整 几乎 是 所 有 文字 处 理 器 都 具有 的 基 
本 特性 。Textralign 属性 使 得 HTML 的 任何 模块 级 标签 都 具有 了 这 个 能 力 。 定 义 对 象 的 
对 齐 方式 是 left( 居 左 ) right 41) center( 居 中 ) 或 justify( 绝 对 居中 ) 。 

(5) Textrindent( 文 字 缩 进 ) : 设置 每 段 第 一 行 的 缩 进 距离 ,允许 负 值 , 但 有 些 浏览 器 不 
支持 。 

(6) White-space( 空 格 ): 决定 一 个 元 素 怎样 处 理 其 中 的 空白 部 分 ,有 三 个 属性 值 。 
mormal( 正 常 ) 是 按照 正常 的 方法 处 理 空格 ,可 以 使 多 重 的 空白 合并 成 一 个 ; pre( 保 留 ) 是 保 
留 应 用 样式 元 素 中 空格 的 原始 形象 ,不 允许 多 重 的 空白 合并 成 一 个 ; nowrap( 不 换行 ) 是 长 
文本 不 自动 换行 。 
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(7) Display( 显 示 ): 指定 是 否 及 如 何 显示 元 素 。 选 择 none 选项 将 关闭 该 样式 被 指定 
给 的 元 素 的 显示 。 


4.3.5 CSS 方 框 设置 


文档 中 的 每 个 元 素 都 可 以 装 在 一 个 矩形 框 内 ,通过 CSS. 可 以 控制 框 的 大 小 、 位 置 和 外 
观 。 在 CSS 规则 定义 对 话 框 的 “ 方 框 ”选项 面板 中 可 以 定义 方 框 的 样式 ,如 图 4. 30 所 示 。 
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图 4. 30 “ 方 框 ?选项 面板 


CL) Width( 宽 ): 在 该 下 拉 列 表 中 可 以 选择 元 素 的 宽度 。auto( 自 动 ) 选 项 表示 由 浏览 
器 自行 控制 ,也 可 以 直接 输入 一 个 值 ,并 在 右 侧 的 下 拉 列 表 中 选择 值 的 单位 。 只 有 当 该 样式 
应 用 到 图 像 或 分 层 上 面 时 , 才 可 以 直接 从 文档 窗口 中 看 到 设置 结果 。 

(2) Height( 高 ): 在 该 下 拉 列 表 中 可 以 选择 元 素 的 高 度 。auto( 自 动 ) 选 项 表示 由 浏览 
器 自行 控制 ,也 可 以 直接 输入 一 个 值 , 并 在 右 侧 的 下 拉 列 表 中 选择 值 的 单位 。 只 有 当 该 样式 
应 用 到 图 像 或 分 层 上 面 时 , 才 可 以 直接 从 文档 窗口 中 看 到 设置 结果 。 

(3) Float( 浮 动 ) : 在 该 下 拉 列 表 中 可 以 选择 应 用 样式 的 元 素 的 浮动 位 置 。 利 用 该 选 
项 ,可 以 将 元 素 移动 到 页 面 范围 之 外 .如果 选 择 left 选项 , 则 将 元 素 放 置 到 左 页 面 空 白 处 ; 
如 果 选 择 right 选项 , 则 将 元 素 放置 到 右 页 面 空白 处 。 

(4) Clear( 清 除 ) : 在 该 下 拉 列 表 中 可 以 定义 不 允许 分 层 。 如 果 选 择 left 选项 , 则 表明 
不 允许 分 层 出 现在 应 用 该 样式 元 素 的 左 侧 ; 如 果 选 择 right 选项 , 则 表明 不 允许 分 层 出 现在 
应 用 该 样式 元 素 的 右 侧 。 如 果 分 层 出 现在 元 素 相应 的 那 侧 , 则 该 元 素 会 在 分 层 下 自动 移 开 。 

(5) Padding HJE): 在 该 区 域 可 以 定义 应 用 样式 的 元 素 内 容 和 元 素 边界 之 间 的 空白 大 
小 。 可 以 分 别 在 上 、 下 、 左 、 右 4 个 下 拉 列 表 中 输入 相应 的 值 ,然后 在 右 侧 的 下 拉 列 表 中 选择 
适当 的 数值 单位 。padding-left、padding-right、padding-top、padding-bottom 属性 都 接受 长 
度 或 百分比 值 ,指定 元 素 周围 要 保留 多 少 空白 。 

(6) Margin( 边 界 ) : 在 该 区 域 可 以 定义 应 用 样式 的 元 素 边 界 和 其 他 元 素 之 间 的 空白 大 
小 。 同 样 可 以 分 别 在 上 下 左右 4 个 下 拉 列 表 中 输入 相应 的 值 , 然 后 在 右 侧 的 下 拉 列 表 中 选 
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择 适 当 的 数值 单位 。margin-left、margin-right、margin-top、margin-bottom 属性 都 接受 长 度 
或 百分比 值 ,指定 元 素 周围 要 保留 多 少 空白 。 

这 种 方式 控制 对 象 来 排版 的 方法 就 是 "DIV 十 CSS 结构 ”, 它 是 Web 标准 所 推荐 的 排版 
方式 ,目前 大 多 数 的 网 站 都 是 采用 这 种 方式 来 进行 页 面 布 局 的 。 


4.3.6 CSS 边框 设置 


边框 属性 是 一 个 用 来 设置 元 素 边框 的 宽度 .式样 和 颜色 的 缩写 。 在 CSS 规则 定义 对 话 
框 的 "边框 ?分 类 中 定义 边框 样式 ,如 图 4. 31 所 示 。 
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图 4.31 “边框 ”属性 面板 


(OD Style( 样 式 ): 有 9 个 选项 ,每 个 选项 代表 一 种 边框 样式 。Border-style 属性 值 包括 
none( 默 认 )、dotted、dashed、solid、double、groove、ridge、inset 和 outset. 

(2) Width( 宽 度 ): 可 以 定义 应 用 该 样式 的 元 素 的 边框 宽度 。 在 Top Right, Bottom 和 
Left 4 个 下 拉 列 表 中 ,可 以 分 别 设置 边框 上 每 个 边 的 宽度 。 用 户 可 以 选择 相应 的 宽度 选项 ， 
如 细 、 中 、 粗 或 具体 数值 来 指定 。 其 他 方向 的 边框 宽度 设 定 都 与 “上 ”相同 。 

(3) Color( 颜 色 ): 可 分 别 设 定 上 下 左右 边框 的 颜色 ,或 勾 选 “全 部 相同 ” 复 选 框 为 所 有 
边线 设置 相同 颜色 。 


4.3.7 CSS 列表 设置 


选择 规则 定义 对 话 框 中 左 侧 的 “列表 ?选项 ,在 右 侧 选项 面板 中 可 以 对 列表 进行 设置 ,如 
图 4. 32 所 示 。 

(D List-style-type( 列 表 类 型 ): 该 选项 决定 了 有 序 和 无 序列 表 项 如 何 显 示 在 能 识别 样 
式 的 浏览 器 上 。 可 为 每 行 的 前 面 加 上 项 目 符号 或 编号 ,用 于 区 分 不 同 的 文本 行 。 

(2) List-style-image( 项 目 符号 图 像 ): 可 以 设置 以 图 片 作 为 无 序列 表 的 项 目 符号 。 可 
以 在 其 中 输入 图 片 文件 的 URL 地 址 ,也 可 以 通过 单 击 “ 浏 览 ?按钮 ,从 磁盘 上 选择 图 片 
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图 4.32 “列表 ?选项 面板 


文 作 。 


(3) List-style-Position( 位 置 ): 设置 列表 项 的 换行 位 置 。 有 两 种 方法 可 用 来 定位 与 一 
个 列表 项 有 关 的 记号 , 即 在 与 项 目 有 关 的 块 外 面 或 里 面 。Listrstyle-Position 属性 接受 以 下 
两 个 值 : inside 或 outside, 


4.3.8 CSS 定位 设置 
在 CSS 规则 定义 对 话 框 的 “定位 ”选项 面板 中 可 以 定义 定位 样式 ,如 图 4. 33 所 示 。 
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4.33 “定位 ”选项 面板 


(D Positon( 位 置 ): 可 以 设置 浏览 器 放置 APDiv 的 方式 ,包含 以 下 4 项 参数 。 
QD Static; 应 用 常规 的 HTML 布局 和 定位 规则 ,并 由 浏览 器 决定 元 素 的 框 的 左边 缘 和 
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上 边缘 。 

@ Relative; 使 元 素 相 对 于 其 包含 的 流 移动 .可 以 在 这 种 情况 下 使 Top, Bottom, Left 
和 Right 属性 都 用 来 计算 框 相对 于 其 在 流 中 正常 位 置 所 处 的 位 置 。 随 后 的 元 素 都 不 会 受到 
这 种 位 置 改变 的 影响 ,而 且 放 在 流 中 的 方式 就 像 没 有 移动 过 该 元 素 一 样 。 

G Absolute: 可 以 从 包含 文本 流 中 去 除 元 素 , 而 且 随 后 的 元 素 可 以 相应 地 向 前 移动 , 然 
后 使 用 Top, Bottom, Left 和 Right 属性 ,相对 于 包含 块 计算 出 元 素 的 位 置 。 这 种 定位 允许 
将 元 素 放 在 关于 其 包含 元 素 的 固定 位 置 ,但 会 随 着 包含 元 素 的 移动 而 移动 。 

(D Fixed; 将 元 素 相对 于 其 显示 的 页 面 或 窗口 进行 定位 。 像 Absolute 定位 一 样 ,从 包 
含 流 中 去 除 元 素 时 ,其 他 的 元 素 也 会 相应 发 生 移动 。 

(2) Visibility( 显 示 ): 设置 层 的 初始 化 显示 位 置 ,包含 以 下 三 个 选项 。inherit (继承): 
继承 分 层 父 级 元 素 的 可 视 性 属性 。visible( 可 见 ): 不 管 分 层 的 父 级 元 素 是 否 可 见 , 都 显示 
层 内 容 。hidden( 隐 藏 ) : 不 管 分 层 的 父 级 元 素 是 否 可 见 , 都 隐藏 该 层 内 容 。 

(3) Width( 宽 )/Height( 高 ): 设置 元 素 本 身 的 大 小 。 

(4) Z-IndexCZ 轴 ): 定义 层 的 顺序 , 即 层 重 全 的 顺序 。 可 以 选择 auto, 或 输入 相应 的 层 
索引 值 。 索 引 值 可 以 为 正 数 或 负数 , 较 高 值 所 在 的 层 会 位 于 较 低 值 所 在 的 层 的 上 端 。 

(5) Overflow( 溢 出 ): 定义 层 中 的 内 容 超出 了 层 的 边界 后 发 生 的 情况 。 包 含 以 下 选 
Ji. visible( 可 见 ), 当 层 中 的 内 容 超出 层 范 围 时 , 层 会 自动 向 下 或 向 右 扩 展 大 小 ,以 容纳 分 
层 内 容 使 之 可 见 ; hidden( 隐 藏 ), 当 层 中 的 内 容 超出 层 范围 时 , 层 的 大 小 不 变 , 也 不 出 现 深 
动 条 ,超出 层 的 内 容 不 显示 ; scroll( 滚 动 ) ,无 论 层 中 的 内 容 是 否 超出 层 范围 , 层 上 总 会 出 现 
滚动 条 ,这 样 即 使 层 内 容 超 出 层 范围 ,也 可 以 利用 滚动 条 浏览 ;auto( 自 动 ), 当 层 中 内 容 超 
出 层 范 围 时 , 层 的 大 小 不 变 ,但 会 出 现 滚动 条 ,以 便 通 过 滚动 条 的 滚动 来 显示 所 有 层 中 内 容 。 

(6) Placement HE): 设置 层 的 位 置 和 大 小 。 有 具体 的 含义 基于 前 面 “ 类 型 ?部 分 的 设 
置 。 在 Top. Right, Bottom 和 Left 4 个 下 拉 列 表 中 ,可 以 分 别 输入 相应 的 值 ,在 右 侧 的 下 拉 
列表 中 选择 相应 的 数值 单位 ,默认 的 单位 是 像素 。 

(7) Clip( 剪 辑 区 域 ) : 定义 可 视 层 的 局 部 区 域 的 位 置 和 大 小 。 如 果 指 定 了 层 的 碎片 区 
域 , 则 可 以 通过 脚本 语言 (如 JavaScript) 进 行 操 作 。 在 Top. Right, Bottom 和 Left 4 个 下 拉 
列表 中 ,可 以 分 别 输入 相应 的 值 ,在 右 侧 的 下 拉 列 表 中 选择 相应 的 数值 单位 ,默认 的 单位 是 
像素 。 


4.3.9 CSS 扩展 设置 


在 CSS 规则 定义 对 话 框 的 “扩展 ”选项 面板 中 定义 扩展 样式 ,如 图 4. 34 所 示 。 

(1) 分 页 : 通过 样式 来 为 网 页 添加 分 页 符号 。 允 许 用 户 指 定 在 某 元 素 前 或 后 进行 分 
页 ,分 页 是 指 打 印 网 页 中 的 内 容 时 在 某 个 指定 的 位 置 停止 ,然后 将 接 下 来 的 内 容 打 在 下 一 张 
纸 上 。 

(2) Cursor( 光 标 ) : 改变 光标 形状 ,光标 放置 于 此 设置 修饰 的 区 域 上 时 ,形状 会 发 生 

(3) Filter( 过 滤器 ): 使 用 CSS 语言 实现 的 滤 镜 效果 ,在 下 拉 列 表 中 有 多 种 滤 镜 可 供 
选择 。 
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图 4.34 “扩展 ?选项 面板 


4.4 编辑 CSS 样式 


定义 过 CSS 样式 后 ,还 可 以 对 CSS 样式 进行 编辑 和 修改 。 
4.4.1 修改 CSS 样式 


修改 CSS 样式 的 具体 步骤 如 下 。 

CD 在 “CSS 样式 ”面板 中 选中 要 修改 的 样式 。 

(2) 单 击 “CSS 样式 ”面板 右 下 角 的 “编辑 样式 表 ” 图 标 因 ,打开 样式 的 “CSS 规则 定义 ” 
对 话 框 。 

(3) 在 样式 的 “CSS 规则 ”对 话 框 中 重新 定义 CSS 样式 即 可 。 


4.4.2 删除 CSS 样式 


删除 CSS 样式 的 步骤 如 下 。 

CD 在 “CSS 样式 ”面板 中 选中 要 删除 的 样式 。 

(2) 单 击 “CSS 样式 ”面板 右 下 角 的 “删除 CSS 样式 ”图 标 国 ; 或 在 “CSS 样式 ”面板 中 
选中 样式 并 单 击 右键 ,从 弹出 的 快捷 菜单 中 选中 “删除 ”命令 。 

(3) 这 时 样式 即 被 删除 ,同时 从 CSS 规则 中 消失 。 


4.4.3 复制 CSS 样式 


复制 CSS 样式 的 具体 步骤 如 下 。 
(1) 在 “CSS 样式 ”面板 中 选中 要 复制 的 样式 。 然 后 单 击 右键 ,在 弹出 的 快捷 菜单 中 选 
中 “复制 "命令 。 
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(2) 打开 * 复 制 CSS 规则 ”对话 框 ,从 中 可 以 重新 命名 及 修改 样式 。 
(3) 设置 完成 后 单 击 “ 确 定 ” 按 钮 , 即 可 完成 CSS 样式 的 复制 操作 。 


人 5 网 页 布局 规划 


4.5.1 表格 的 基础 知识 


使 用 表格 布局 页 面 是 网 页 布局 最 基本 的 方法 。 由 于 浏览 器 与 表格 均 为 矩形 形状 ,因此 
使 用 表格 分 割 画 面 是 最 简单 的 方式 。 使 用 表格 排版 的 页 面 在 不 同 平台 ,不 同 分 辩 率 的 浏览 
器 中 都 能 保持 其 原 有 的 布局 , 且 在 不 同 的 浏览 器 平台 中 具有 较 好 的 兼容 性 。 


1. 插入 表格 

表格 是 由 行 和 列 组 成 的 ,并 根据 行 和 列 的 个 数 决定 形状 。 行 和 列 交叉 形成 了 和 矩形 区 域 ， 
即 表格 中 的 一 个 矩形 单元 称 为 单元 格 。 在 Dreamweaver 中 利用 “表格 ”对 话 框 可 以 插入 表 
格 。 执 行 “ 插 入 ”| 表格 ”命令 或 在 “插入 ?面板 的 “常用 ”分 类 中 单 击 * 表 格 ” 按 钮 ,打开 “表格 ” 
对 话 框 ,如 图 4. 35 所 示 。 
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图 4. 35 “表格 ”对 话 框 


(1)“ 行 数 / 列 ”: 指定 表格 的 行 和 列 的 个 数 。 

(2)“ 表 格 宽度 ”: 指定 将 表格 宽度 以 像素 单位 或 浏览 器 窗口 宽度 为 基准 的 百分比 (%) 
单位 。 
G) “边框 粗细 ”: 用 像素 单位 来 指定 表格 边框 线 的 厚度 。 如 果 不 想 显 示 表 格 的 边框 
线 , 可 以 输入 0。 

(4)“ 单 元 格 边 距 ”: 指定 单元 格 的 内 容 以 及 单元 格 边框 之 间 的 空白 。 不 输入 具体 数值 
时 ,默认 值 为 1 像素 。 
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(5)“ 单 元 格 间距 ”: 指定 单元 格 之 间 的 空白 。 不 输入 具体 数值 时 ,默认 值 为 2 像素 。 

(6)“ 标 题 ”: 将 表格 的 一 行 或 一 列表 示 为 表 头 时 ,选择 所 需 的 标题 样式 。 

(7)“ 辅 助 功 能 ”: 指定 针对 表格 设置 的 辅助 选项 。 

中“ 标题”: 指定 表格 的 标题 。 

加 “摘要 ”: 输入 关于 表格 的 摘要 说 明 。 该 内 容 虽 然 不 显示 在 浏览 器 中 ,但 可 以 在 屏幕 
阅读 器 上 识别 ,并 可 以 转换 为 语音 。 

插入 表格 后 ,将 会 在 表格 的 最 下 方 出 现 整个 表格 和 各 列 的 列 宽 值 。 调 节 表 格 宽度 时 ,该 
值 也 会 一 起 变化 ,因此 很 容易 调节 表格 。 

有 时 会 同时 出 现 两 种 数字 ,这 是 由 于 HTML 代码 中 设置 的 列 宽度 和 实际 页 面 中 显示 
的 列 宽度 不 一 致 造成 的 。 在 这 种 情况 下 , 单 击 表示 整个 表格 宽度 的 数字 ,在 弹出 的 下 拉 列 表 
中 选择 “使 所 有 宽度 ”选项 , 即 可 使 代码 与 页 面 中 显示 的 宽度 一 致 


2. 调整 表格 


插入 表格 后 ,可 以 通过 调节 表格 大 小 等 操作 来 制作 所 需 的 形状 。 当 表格 周围 出 现 黑色 
边框 ,就 表示 已 经 选择 了 该 表格 。 将 光标 移动 到 尺寸 手柄 上 ,光标 会 变 成 一 一 或 于 形状 。 
在 此 状态 下 按 住 鼠标 左 键 ,向 左右 、 上 下 或 对 角 线 方向 上 拖 动 就 可 以 调节 表格 的 大 小 。 当 光 
标 移动 到 表格 右 下 方 的 手柄 处 ,光标 变 成 My 形状 时 ,可 以 向 下 拖 动 鼠 标 来 增 大 表格 高 度 。 
插入 表格 后 ,在 操作 过 程 中 可 能 会 出 现 表 格 的 中 间 需 要 嵌入 单元 格 或 删除 不 需要 的 单元 格 
的 情况 。 此 时 ,执行 Dreamweaver CS6 中 的 添加 和 删除 表格 的 相关 命令 即 可 。 添 加 行 或 列 
的 时 候 , 可 以 添加 一 行 或 一 列 , 也 可 以 同时 添加 多 个 行 或 列 。 

1) 添加 行 和 列 

在 插入 的 表格 中 添加 行 或 列 时 , 右 击 表格 ， 



































插入: 回 行 而 ] 
在 弹出 的 快捷 菜单 栏 中 执行 “表格 "|* 插 入 行 | oxic) 
( 列 , 行 或 列 )" 命 令 , 可 以 更 加 快捷 地 进行 操作 。 HUN n 
执行 “插入 行 或 列 ”" 命 令 后 ,将 弹出 “插入 行 或 加 所 这 之 下 他 
列 "对 话 框 ,如 图 4. 36 所 示 。 在 该 对 话 框 中 设 ———— 
置 行 数 、 列 数 以 及 插入 位 置 。 图 4. 36 “插入 行 或 列 ” 对 话 框 


CD "dif AT. 选择 添加 “ 行 ” 或 添加 “ 列 ”。 

(2)“ 行 ( 列 ) 数 ”: 输入 要 添加 的 行 或 列 的 个 数 。 

(3) “位置 ?: 选择 添加 行 或 列 的 位 置 。 

技巧 : 将 插入 点 置 于 表格 最 后 一 行 的 最 后 一 个 单元 格 中 , 按 Tab 键 ,可 快速 插入 一 个 新 
的 行 。 

2) 删除 行 和 列 

删除 行 或 列 的 最 简单 的 方法 是 选择 想 删 除 的 行 或 列 后 , 按 Delete 键 。 例 如 , 单 击 第 一 
列 的 第 一 个 单元 格 , 按 住 鼠 标 左 键 并 拖 动 到 第 一 列 的 最 后 一 个 单元 格 , 即 选中 该 列 , 按 
Delete 键 即 可 。 或 者 选中 要 删除 的 行 或 列 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 执行 表格 - 
删除 行 (删除 列 )” 命 令 , 即 可 删除 选中 的 行 或 列 。 

用 户 还 可 以 一 次 对 多 个 单元 格 进行 复制 或 粘贴 操作 , 既 可 以 选择 在 复制 和 粘贴 时 保留 
原 格 式 ,也 可 以 选择 在 复制 和 粘贴 时 仅 操作 单元 格 中 的 内 容 。 
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3. 编辑 表格 


1) 设置 表格 属性 

在 页 面 中 选择 表格 后 ,在 文档 窗口 下 方 将 会 显示 表格 的 “属性 ”面板 ,如 图 4. 37 所 示 。 
在 该 面板 中 可 以 调整 行 和 列 的 个 数 、 表 格 的 宽度 和 高 度 、 单 元 格 的 空格 等 属性 。 表 格 “ 属 性 ” 
面板 中 的 各 项 参数 含义 如 下 。 





图 4.37 设置 表格 属性 


CD “表格”: 输入 表格 名 称 。 

(2)“ 行 、 列 ”: 输入 构成 表格 的 行 和 列 的 个 数 。 

(3)“ 宽 ”: 指定 表格 的 宽度 。 以 当前 文档 的 宽度 为 基准 ,可 以 指定 百分比 或 像素 为 单 
位 。 默 认 单位 为 像素 , 若 想 固定 大 小 , 需 继续 使 用 像素 单位 。 

(4)“ 填 充 ”: 设置 单元 格 内 容 和 单元 格 边框 之 间 的 间距 。 可 以 认为 是 单元 格 内 侧 的 空 
白 。 将 该 值 设置 为 0 以 外 的 数值 时 ,在 边框 和 内 容 之 间 会 生成 间隔 。 

(5)“ 对 齐 ”: 设置 表格 在 文档 中 的 位 置 。 包 括 :“ 默 认 ”“ 左 对 齐 "“ 居 中 对 齐 * 和 "* 右 对 
齐 ”4 个 选项 。 

O) RK”: 设置 表格 样式 。 

(7)“ 间 距 ”: 设置 单元 格 之 间 的 间距 。 该 值 设置 为 0 以 外 的 数值 时 ,在 单元 格 和 单元 格 
之 间 会 出 现 空格 ,因此 两 个 单元 格 之 间 有 一 些 间距 。 

(8)“ 边 框 ” 设置 表格 的 边框 厚度 。 大 部 分 浏览 器 中 ,表格 的 边框 都 会 采用 立体 性 的 
效果 方式 ,但 在 整理 网 页 文件 而 使 用 的 布局 表格 中 ,最 好 不 要 显示 边框 。 在 这 种 情况 下 ,就 
需要 将 “边框 ”的 值 设 置 为 0。 

2) 设置 单元 格 属性 

在 页 面 中 选择 单元 格 后 ,在 文档 窗口 下 方 会 显示 单元 格 的 “属性 "面板 ,如 图 4. 38 所 示 。 
在 该 面板 中 可 以 设置 单元 格 的 背景 颜色 或 背景 图 像 、 对 齐 方式 ,边框 颜色 等 各 种 属性 ,还 可 
以 将 一 个 单元 格 拆 分 成 几 个 单元 格 或 将 多 个 单元 格 合并 为 一 个 单元 格 。 单 元 格 的 “属性 ” 面 
板 中 各 项 参数 含义 如 下 。 





4.38 设置 单元 格 属性 


(1) 合并 所 选单 元 格 ,使 用 跨度 : 选择 两 个 以 上 的 单元 格 后 , 单 击 该 按钮 ,就 可 以 合并 
这 些 单元 格 。 
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(2) 拆 分 单元 格 为 行 或 列 : 单 击 该 按钮 后 ,选择 行 或 列 以 及 拆 分 的 个 数 , 就 可 以 拆 分 所 
选单 元 格 。 

(3) 垂直 : 设置 单元 格 中 的 图 像 或 文本 的 纵向 位 置 。 包 括 “ 顶 端 "“ 居 中 ”“ 底 部 ”“ 基 
Be” AU BRIS 种 形式 。 

(4) 水 平 : 设置 单元 格 中 的 图 像 或 文本 的 横向 位 置 。 

(5) 宽 高 : 设置 单元 格 的 宽度 和 高 度 。 

(6) 不 换行 : 输入 文本 时 ,即使 超出 单元 格 的 宽度 ,也 不 会 换行 。 在 不 换行 的 情况 下 继 
续 横 向 输入 ,就 会 增 大 单元 格 的 宽度 。 

(7) 标题 : 为 了 与 其 他 内 容 区 别 , 明 显 地 表示 单元 格 标 题 并 居中 对 齐 。 

(8) 背景 颜色 : 指定 单元 格 的 背景 颜色 。 


4.5.2 使 用 框架 


框架 指 的 是 把 一 个 画面 分 成 几 个 区 域 , 并 在 各 个 区 域 中 显示 不 同 网 页 文件 的 结构 ,利用 
框架 可 以 更 容易 整理 文档 。 框 架 的 英文 是 “frame”, 是 指 网 页 在 一 个 浏览 器 窗口 下 分 割 成 几 
个 不 同 区域 的 形式 。 


1. 框架 的 概念 


学 习 框 架 之 前 ,首先 要 了 解 框架 和 框架 集 的 关系 。 框 架 和 框架 集 的 用 语 类 似 ,因此 容易 
混淆 。 如 图 4. 39 所 示 ,该 文档 将 页 面 分 成 上 、 下 两 个 大 页 面 (其 中 下 部 分 又 分 成 左下 和 右 下 
两 个 页 面 ) ,这 样 分 成 的 各 个 画面 称 为 框架 。 因 此 ,该 文档 一 共 由 两 个 框架 组 成 。 


一 个 页 面 中 显示 三 个 文档 


页 面 中 上 侧 的 文档 








awe 





ile 

ome 页 面 中 下 侧 左 部 分 的 文档 
T [xo 
[gram hal 
thse imas? 
on ita incl 页 面 中 下 侧 右 部 分 的 文档 
mitre iw i e ST. 





图 4. 39 框架 和 框架 集 显 示 效 果 
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根据 需要 分 解 框架 后 ,在 各 个 框架 上 再 插入 已 准备 的 文档 。 在 各 个 框架 上 填充 文档 后 
会 保存 整体 结构 ,而 合并 这 两 个 画面 的 总 体 框 架 称 为 框架 集 。 框 架 集 中 包括 当前 文档 的 框 
架 组 成 个 数 .各 个 框架 的 大 小 、 各 框架 的 连接 文件 等 相关 信息 。 并 且 ,在 浏览 器 上 只 显示 框 
架 集 文件 , 即 可 一 次 性 显示 出 所 有 框架 文件 。 

由 两 个 框架 形成 的 文档 包括 各 个 框架 的 相关 文档 和 框架 集 文档 ,所 以 共 包含 三 个 文档 。 
框架 的 作用 就 是 把 浏览 器 窗口 划分 为 若干 个 区 域 , 每 个 区 域 可 以 分 别 显 示 不 同 的 网 页 。 这 
样 重复 出 现 的 内 容 被 固定 下 来 ,每 次 浏览 者 发 出 对 页 面 的 请 求 时 ,只 下 载 发 生变 化 的 框架 的 
页 面 ,其 他 子 页 面 保持 不 变 ,必然 就 会 给 浏览 者 带 来 方便 ,节省 时 间 。 使 用 框架 可 以 非常 方 
便 地 完成 导航 工作 ,而 且 各 个 框架 之 间 绝 不 存在 互相 干扰 的 问题 ,所 以 框架 技术 一 直 被 广泛 
应 用 于 页 面 导 航 。 

可 以 在 框架 集中 再 插入 其 他 框架 集 , 这 种 做 法 通常 称 为 " 嵌 套 框架 集 ”, 而 这 些 框架 集 也 
经 常 应 用 在 由 框架 组 成 的 网 页 中 。 

如 图 4. 40 所 示 ,左下 侧 结构 的 框架 集 是 先 制作 上 下 框架 结构 的 框架 集 , 并 在 下 侧 框架 
中 再 插入 一 个 左右 框架 集 所 得 到 的 框架 集 。 














HERE 














框架 集 1 








框架 集 2 














图 4.40 di fA 


2. 设置 框架 集 属性 


在 “框架 ”面板 中 单 击 外 边框 ,就 可 以 选中 框架 集 并 显示 对 应 的 “属性 ”面板 ,如 图 4. 41 
所 示 。 此 时 ,在 “属性 ”面板 中 出 现 如 下 框架 集 相关 属性 。 











mu 
[tr] gea , — xe»[s — - reoc 
5j 1 VEREM 0 





mm l 


图 4.41 框架 集 “属性 ”面板 


COD “边框 ”: 设置 框架 是 否 有 边框 。“ 是 ”选项 为 有 边框 ,“ 否 ”选项 为 无 边框 ,“ 默 认 ” 选 
项 为 浏览 器 决定 是 否 有 边框 。 对 于 大 多 数 浏览 器 而 言 ,默认 为 有 边框 ,如 果 框 架 集 属性 的 设 
置 和 框架 属性 的 设置 相 冲 突 , 以 框架 属性 的 设置 为 主 。 
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(2)“ 边 框 颜 色 ”: 设置 边框 的 颜色 ,可 以 单 击 颜色 框 , 在 拾 色 器 面板 中 进行 选择 。 

(3) “边框 宽 度 ”: 设置 框架 结构 中 边框 的 宽度 ,单位 是 像素 。 

(4) 设置 框架 结构 的 拆 分 比例 : 如 果 拆 分 的 形式 是 上 下 拆 分 ,那么 显示 “ 行 ” 项 目的 数 
据 ; 如 果 拆 分 的 形式 是 左右 拆 分 , 则 显示 * 列 ?项 目的 数据 。 在 最 右 侧 的 框 中 ,可 以 选择 要 进 
行 设置 的 框架 ,选择 后 会 在 “ 值 ? 和 * 单 位 ?两 项 中 出 现 该 框架 对 应 的 值 .“ 值 ?项 目 对 于 “ 行 ” 
来 说 指 的 是 高 度 , 对 于 * 列 ?项目 来 说 指 的 是 宽度 。“ 值 ?的 取 值 和 * 单 位 ”的 设置 有 着 密切 的 
关系 。“ 单 位 ”共有 三 个 选项 可 供 选择 。 

CD 像素 : 为 框架 的 高 或 宽 设置 绝对 值 。 如 果 不 希 望 在 用 户 调整 屏幕 分 辩 率 或 者 浏览 
器 窗口 时 框架 大 小 发 生 改 变 , 例 如 在 框架 中 插入 网 页 的 标题 .导航 条 等 时 ,可 以 采用 为 框架 
设置 绝对 值 的 办 法 。 但 是 ,网 页 中 的 每 个 框架 不 可 能 都 设置 为 像素 值 , 有 一 个 框架 设置 为 像 
素 值 ,通常 会 有 其 他 框架 的 高 度 设置 为 相对 值 。 

@ 百分比 : 是 指 框架 在 其 所 在 的 框架 结构 中 所 占 总 高 或 总 宽 的 百分比 。 

C) 相对 : 在 其 他 框架 设置 了 以 像素 或 百分比 为 单位 的 高 宽 后 ,剩余 的 高 宽 会 分 配给 单 
位 设置 为 “相对 ”的 框架 。 使 用 “相对 ”作为 单位 时 ,通常 不 需要 设置 值 ,有 的 时 候 为 了 保证 跨 
浏览 器 时 的 兼容 性 ,可 以 设置 值 为 “1”。 


3. 设置 框架 属性 


在 “框架 ”面板 中 选择 框架 时 或 在 操作 画面 中 选择 框架 时 ,在 “属性 ”面板 中 出 现 如 图 4. 42 
所 示 的 框架 相关 属性 。 


后 性 
fa] 框架 名 称 。 源 文件 @ J/Cl/Dreanreaver/UntitledFrue-2|Qy C) WED Bir] 
Mene. | RO (Wr) RG) eor | 
DIREO 

DREO 





























4.42 框架 “属性 ”面板 


(1)“ 框 架 名 称 ”: 显示 所 选 框 架 的 名 称 (不 要 与 文件 名 称 混淆 )。 输 入 框架 名 称 , 才 可 
以 应 用 框架 与 其 他 文件 链接 等 各 种 功能 。 框 架 名 称 必须 以 英文 字母 开头 , 且 不 可 以 使 用 特 
殊 字符 或 空格 。 

(2)“ 源 文件 ”: 指定 当前 选择 的 框架 中 出 现 的 文件 名 称 。 可 以 单 击 “ 浏 览 ” 按 钮 选择 文 
件 或 直接 输入 文件 所 在 的 路 径 。 

(3) "IRI". 选择 在 框架 中 是 否 显示 滚动 条 ,包含 以 下 几 个 选项 。 

O 是 : 显示 滚动 条 。 

© fi. 即使 无 法 显示 框架 的 一 部 分 ,也 不 显示 滚动 条 。 

© 自动 : 内 容 比 框架 区 域 更 长 的 时 候 , 显 示 滚 动 条 。 

© 默认 : 设置 为 默认 值 。 

(4) "hd". 选择 是 否 显示 当前 框架 的 边框 。 若 选择 是”, 显示 边框 ; 车 选择 “ 否 ”, 不 
显示 边框 。 

(5)“ 边 界 宽度 /边界 高 度 ”: 设置 框架 内 容 的 周围 边界 。 例 如 ,设置 10 像素 的 边界 宽 
度 , 会 在 左 侧 和 右 侧 分 别 留 出 5 像素 的 空白 。 
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(6)“ 不 能 调整 大 小 ”: 勾 选 此 复 选 框 即 可 固定 框架 的 大 小 ,使 用 户 不 能 随意 调节 框架 
的 大 小 。 
(7) “边框 颜色 ”: 指定 框架 的 边框 颜色 。 


4. 设置 框架 链接 


使 用 框架 的 最 大 理由 是 可 以 固定 页 面 的 一 部 分 ,而 且 可 以 只 更 改 需 要 更 改 的 框架 的 内 
容 , 即 在 不 改变 菜单 所 在 框架 的 情况 下 ,只 变动 菜单 中 的 相关 内 容 。 若 想 在 特定 框架 中 显示 
所 需 的 内 容 , 就 要 区 分 多 个 不 同 的 框架 ,因此 ,应 该 给 各 个 框架 间 设 置 链 接 。 

在 Dreamweaver CS6 中 制作 框架 时 ,会 自动 生成 框架 名 称 , 用 户 可 以 按 需要 适当 更 改 
框架 名 称 。 但 框架 名 称 一 定 要 输入 英文 ,而 且 不 能 使 用 特殊 字符 或 空格 。 输 入 框架 名 称 
后 ,在 “属性 ?面板 的 “目标 ?下 拉 列 表 中 选择 所 需 目 标 , 即 表示 内 容 的 框架 ,如 图 4. 43 
所 示 。 
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图 4.43 框架 “属性 ?面板 中 的 “目标 ” 


“属性 ?面板 中 的 “目标 ?下 拉 列 表 中 不 仅 包括 名 称 , 而 且 还 提供 _blank、parent、self、 
top 等 属性 选项 。 应 用 链接 方式 来 链接 当前 文档 和 其 他 文档 时 ,最 好 在 “目标 ”下 拉 列 表 中 
选择 _blank 或 _ top 选项 。 

(1) blank; 在 新 窗口 中 显示 链接 内 容 。 

(2) parent; 链接 内 容 出 现在 包括 当前 框架 文档 的 父 框架 集 上 ,大 部 分 都 会 出 现 与 应 
JH top 选项 一 样 的 结果 o 

(3) self; 链接 内 容 出 现在 应 用 链接 的 窗口 或 框架 中 。 在 没有 另外 指定 “目标 ?的 情况 
下 ,会 作为 默认 值 。 

(4) top: 删除 所 有 当前 框架 结构 ,并 显示 链接 内 容 。 


5. 制作 内 联 框架 


框架 文件 的 优点 是 在 保持 菜单 等 一 部 分 内 容 的 情况 下 ,可 以 更 换 其 中 的 实际 内 容 , 因 
此 ,比较 容易 维持 网 页 的 整体 设计 。 但 整个 网 页 由 一 个 图 像 组 成 时 ,很 难 利用 框架 结构 , 因 
为 将 切割 图 像 插 和 到 多 个 框架 时 ,很 难 显 示 成 一 个 图 像 。 

将 切割 后 的 小 图 像 最 终 显示 为 一 个 大 图 像 的 最 好 方法 是 利用 表格 。 那 么 ,在 利用 表格 
来 制作 的 布局 中 ,可 不 可 以 像框 架 文 件 一 样 ,在 固定 一 部 分 的 同时 只 更 改 其 中 的 实际 内 容 
呢 ? 这 种 情况 下 ,可 以 应 用 内 联 框架 ,内 联 框架 也 可 以 称 为 “浮动 框架 ”。 

如 图 4. 44 所 示 , 网 页 中 顶部 和 左 侧 部 分 图 像 是 固定 的 ,而 右 下 侧 部 分 为 利用 链接 来 链 
接 起 来 的 文档 。 这 是 利用 表格 来 制作 的 布局 ,在 显示 实际 内 容 的 右 侧 部 分 单元 格 中 插入 了 
内 联 框架 。 
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图 4. 44 内 联 框架 示意 图 


4.5.3 使 用 CSS 布局 网 页 
1. 初 识 DIV 


< 二 div 过 标记 作为 一 个 容器 标记 被 广泛 地 应 用 在 HTML 中 。 利 用 这 个 标记 ,加 上 css 
对 齐 控制 ,可 以 很 方便 地 实现 各 种 效果 。 

创建 DIV 的 方法 : 过 div 之 简单 而 言 就 是 一 个 区 块 容 器 标记 , 即 二 div 之 与 二 /div 之 之 间 
相当 于 一 个 容器 ,可 以 容纳 段落 标题. 表格、 图片, 乃至 章节 摘要 和 备注 等 各 种 HTML 元 
素 。 因 此 ,可 以 把 二 div 之 与 二 /div 之 中 的 内 容 视 为 一 个 独立 的 对 象 ,用 于 CSS 的 控制 。 声 
明 时 只 需要 对 和 二 div 之 进行 相应 的 控制 ,其 中 的 各 种 标记 元 素 都 会 因此 而 改变 。 

[5]4.18] 一 div 之 标记 实例 。 


<html> 

<head> 

«title» div 标记 范例 </title> 
< style type = "text/css"> 


font- size:18px; 
font - weight:bold; 
font - fanily:Arial; 
color: # FF0000; 
background - color: # FFFF00; 
text- align:center; 
width:300px; 
height:100px; } 
--> 
</style> 
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</head> 

<body> 

<div> 

这 是 一 个 div 标记 
</div> 

</body> 

</html> 


在 上 面 的 实例 中 通过 CSS MP <div> tk hE dl ,制作 了 一 个 宽 300 像素 和 高 100 像素 的 
黄色 区 块 , 并 进行 了 文字 效果 的 相应 设置 ,在 浏览 器 中 的 执行 结果 如 图 4. 45 所 示 。 
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这 是 一 个 div 标 记 





图 4.45 创建 DIV 


2. CSS 定位 与 DIV 布局 


网 页 中 的 各 种 元 素 都 必须 有 自己 合理 的 位 置 , 从 而 搭建 出 整个 页 面 的 结构 。 下 面 围绕 
CSS 定位 的 几 种 原理 方法 ,深入 介绍 使 用 CSS 对 页 面 中 的 块 元 素 定位 的 方法 。 

D 盒子 模型 

盒子 模型 是 CSS 控制 页 面 时 一 个 很 重要 的 概念 。 对 所 有 页 面 中 的 元 素 都 可 以 看 成 是 
一 个 盒子 , 它 占据 着 一 定 的 页 面 空间 。 一 般 来 说 ,这 些 被 占据 的 空间 往往 都 要 比 单纯 的 内 容 
要 大 , 换 句 话说 ,可 以 通过 调整 盒子 的 边 距 和 上 距离 等 参数 来 调整 盒子 的 位 置 。 

一 个 盒子 模型 是 由 content( 内 容 ) .border( 边 框 ) padding (E Bt) Al margin( 间 隔 ) 等 4 
个 部 分 组 成 ,如 图 4. 46 所 示 。 

一 个 盒子 的 实际 宽度 (或 高 度 ) 是 由 content 十 padding 十 border 十 margin 组 成 的 。 在 
CSS 中 可 以 通过 设 定 width 和 height 的 值 来 控制 content 的 大 小 ,并 且 对 于 任何 一 个 盒子 ， 
都 可 以 分 别 设 定 4 条 边 各 自 的 border, padding 和 margin。 因 此 只 要 利用 好 盒子 的 这 些 属 
性 ,就 能 够 实现 各 种 各 样 的 布局 效果 。 
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图 4.46 盒子 模型 


关于 盒子 模型 ,有 以 下 几 点 要 注意 。 

(1) 边界 值 可 为 负 值 , 其 显示 效果 各 个 浏览 器 可 能 不 同 。 

(2) 边框 默认 的 样式 (border-style) 为 不 显示 Cnone) 。 

(3) 填充 值 不 可 为 负 。 

(4) 对 于 块 级 元 素 ,未 浮动 的 垂直 相 邻 元 素 的 上 边界 和 下 边界 会 被 压缩 。 例 如 ,有 上 下 
两 个 元 素 , 上 面 元 素 的 下 边界 为 10px, 下 面 元 素 的 上 边界 为 5px, 则 实际 两 个 元 素 的 间距 为 
10px( 两 个 边界 值 中 较 大 的 值 ) 。 

(5) 浮动 元 素 (无 论 左 或 右 浮 动 ) 边 界 不 压缩 , 且 若 浮动 元 素 不 声明 宽度 , 则 其 宽度 趋向 
于 0, 即 压缩 到 其 内 容 能 承受 的 最 小 宽度 。 

(6) 内 联 元 素 , 例 如 标签 二 a 二 ,定义 上 下 边界 不 会 影响 到 行 高 。 

(7) 如 果 盒 子 中 没有 内 容 , 则 即使 定义 了 宽度 和 高 度 都 为 100% ,实际 上 只 占 0, 因 此 不 
会 被 显示 ,此 点 在 采取 布局 的 时 候 需要 特别 注意 。 

2) 元 素 的 定位 

网 页 中 的 各 个 元 素 都 必须 有 自己 合理 的 位 置 , 从 而 搭建 出 整个 页 面 的 结构 。 围 绕 CSS 
定位 有 以 下 几 个 常用 标签 ,包括 position, float 和 z-index 等 。 

(1) float 定位 

float 定位 是 CSS 排版 中 非常 重要 的 手段 ,属性 float 的 值 很 简单 ,可 以 设置 为 left、 
right 或 者 默认 值 none。 当 设置 了 元 素 向 左 或 者 向 右 浮 动 时 ,元 素 会 向 其 父 元 素 的 左 侧 或 
右 侧 靠 紧 。 

【 例 4.19] float 属性 实例 。 

<html> 

<head> 

<title> float 属性 </title> 

<style type = "text/css"> 

“= 

body{ 

margin: 15px; 
font - family: Arial; 


font — size:12px; 
} 


1245 动态 网 站 开发 教程 Dreamweaver+MySQL+PHP) 


AN 


. father{ 
background - color: # ££0000; 
border:lpx solid #111111; 
padding: 25px; 
/ * SRE padding * / 
} 
. sonl{ 
padding: 10px; 
/ * Fik soni 的 padding * / 
margin:5px; 
/ * FH soni 的 margin * / 
background - color: # ffff00; 
border:lpx dashed #111111; 
float:left; / * FH soni 左 浮动 * / 
) 
.son2( 
padding:5px; 
margin: 0px; 
background - color: # ffd270; 
border: 1px dashed #111111; 
} 
一 > 
</style> 
</head> 


< body> 

<div class = "father"> 

< div class = "son1"> floatl </div> 
< div class = "son2"> float2 </div> 
</div> 

</body> 

</html > 


没有 设置 块 sonl 向 左 浮动 前 ,页 面 效果 如 图 4.47 所 示 。 
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图 4.47 没有 左 浮动 的 效果 
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当 设 置 了 块 sonl 的 float (AW left 时 ,页 面 效果 如 图 4. 48 所 示 o 


D goat 属 性 








图 4.48 设置 左 浮动 的 效果 


(2) position 定位 

position 定位 与 float 一 样 ,也 是 CSS 排版 中 非常 重要 的 概念 。position 从 字面 意思 上 
看 就 是 指定 块 的 位 置 , 即 块 相 对 于 其 父 块 的 位 置 和 相对 于 它 自 身 应 该 在 的 位 置 。 

position 属性 一 共有 4 个 值 ,分 别 是 static absolute, relative 和 fixed。 其 中 ,static 为 默 
认 值 , 它 表 示 块 保持 在 原本 应 该 在 的 位 置 上 , 即 该 值 没有 任何 移动 的 效果 。 下 面 以 absolute 
为 例 来 解释 position 定位 。 

[B] 4.20] position 属性 实例 。 


<html> 
<head> 
«title» position 属性 </title> 
<style type = "text/css"> 
sq-- 
# father( 
background - color: & ffff66; 
border : 1px dashed # 000000; 
width:100 % ; 
height:100 % ; 
padding: 5px; 
} 
# block1{ 
background ~ color: # fff0ac; 
border:1px dashed 000000; 
padding: 10px; 
position:absolute; / * absolute 绝对 定位 < / 
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left:30px; 
top: 35px; 
) 
# block2{ 
background - color: # ffbd76; 
border:1px dashed 000000; 
padding:10px; 
} 


ay 
</style> 
</head> 
</body> 
<div id= "father"> 
<div id= "blockl"> absolute </div> 
<div id= "block2"» block2 </div> 
</div> 
</body > 
</html> 


上 面 的 例子 中 将 子 块 1 的 position 属性 值 设 置 为 absolute, 并 且 调 整 了 它 的 位 置 , 此 时 
子 块 2 便 移动 到 了 父 块 的 最 上 端 ,如 图 4. 49 所 示 。 此 时 子 块 1 已 经 不 再 属于 父 块 # father, 
因为 将 其 position 值 设 置 成 了 absolute, 因 此 子 块 2 成 为 父 块 中 的 第 一 个 子 块 ,移动 到 了 父 
块 的 最 上 方 , 如 图 4.49 所 示 。 
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4.49 FIR 1 的 position 属性 为 absolute 设置 效果 


如 果 将 两 个 子 块 的 position 属性 同时 设置 为 absolute, 这 时 两 个 子 块 都 将 不 再 属于 其 
父 块 ,都 相对 于 页 面 定位 。 在 上 例 的 基础 上 进行 修改 ,代码 如 下 。 
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f blockl( 
background - color: # fff0ac; 
border:1px dashed 000000; 
padding: 10px; 
position:absolute; / * absolute 绝对 定位 * / 
left: 30px; 
top: 35px; 
} 
# block2{ 
background - color: # ffbd76; 
border: 1px dashed + 000000; 
padding: 10px; 
position: absolute; / * absolute 绝对 定位 * / 
left: 50px; 
top: 60px; 
} 


当 两 个 子 块 的 position 属性 都 设置 为 absolute 时 ,它们 都 按照 各 自 的 属性 进行 定位 ,都 
不 再 属于 其 父 块 。 两 个 子 块 有 重 释 的 部 分 ,上 且 块 2 位 于 块 1 的 上 方 ,如 图 4. 50 所 示 。 
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图 4.50 ”两 个 子 块 position 属性 都 为 absolute 设置 效果 


(3) z-index 空间 位 置 

z-index 属性 用 于 调整 定位 时 重 琶 块 的 上 下 位 置 ,与 它 的 名 称 一 样 ,页面 为 xy 轴 , 垂 直 
于 页 面 的 方向 为 z 轴 ,z-index 值 大 的 页 面 位 于 其 值 小 的 上 方 。 

z-index 属性 的 值 为 整数 ,可 以 是 正 数 也 可 以 是 负数 。 当 块 被 设置 了 position 属性 时 ， 
该 值 便 可 设置 各 块 之 间 的 重生 高 低 关 系 。 默 认 的 z-index 值 为 0 时 , 当 两 个 块 的 z-index ffi 
一 样 时 ,将 保持 原 有 的 高 低 覆 盖 关 系 。 
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[B] 4.21] z-index 属性 实例 。 


<html> 
<head> 
<title>z— index 属性 </title> 
< style type="text/css"> 
= 
body{ 
margin:10px; 
font - family:Arial; 
font — size:13px; 
} 
# blocki( 
background - color: # ff0000; 
border : 1px dashed 000000; 
padding: 10px; 
position: absolute; 
left:20px; 
top:30px; 
z- index:1; /* 高低 值 1*/ 
} 
# block2{ 
background - color: # ffc24c; 
border: 1px dashed 000000; 
padding: 10px; 
position:absolute; 
left: 40px; 
top:50px; 
z- index:0; /* 高 低 值 0* / 
) 
# block3( 
background - color: # c7ff9d; 
border : 1px dashed # 000000; 
padding: 10px; 
position: absolute; 
left: 60px; 
top: 70px; 
z- index: - 1; /* 高 低 值 -1x / 
) 
--> 
</style> 
</head> 
< body> 
<div id= "block1"> AAAAAAAAAA </div> 
<div id= "block2"> BBBBBBBBBB </div> 
<div id= "block3"> CCCCCCCCCC </div> 
</body> 
</html> 


1E LMM FE PS AK A RG aiT z-index 的 值 ,设置 前 与 设置 后 的 效 
果 分 别 如 图 4.51 和 图 4.52 所 示 。 
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图 4.51 设置 z-index 前 的 效果 





图 4.52 设置 z-index 后 的 效果 


【 例 4.22】 使 用 元 素 的 定位 方法 实现 文字 的 阴影 效果 。 


<html> 

<head> 

< title > 文字 阴影 效果 </title> 
<style type= "text/css"> 
<!—— 

body{ 
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margin:l5px; 
font- family: 黑 体 ; 
font - size:60px; 
font — weight :bold; 
} 
# blockl( 
position: relative; 
z- index:1; 
i 
# block2{ 
color: # AAAAAA; 
/* 阴影 颜色 * / 
position: relative; 
top: — 1. 06em; 
/x* 移动 阴影 * / 
left:0.1em; 
z- index:0; 
/* BESESXSs/ 
) 
==> 
</style> 
</head> 
< body> 
<div id= "father"» 
<div id= "blockl"> 定 位 阴影 效果 </div> 
<div id= "block2"> 定 位 阴影 效果 </div> 
</div> 
</body> 
</html> 


效果 如 图 4.53 所 示 。 
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图 4.53 定位 阴影 效果 
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3. CSS DIV 布局 的 常用 方法 


使 用 DIV 可 以 将 页 面 首 先 在 整体 上 进行 二 div 之 标记 的 分 块 ,然后 对 各 个 块 进行 CSS 
定位 ,最 后 再 在 各 个 块 中 添加 相应 的 内 容 。 这 样 进 行 二 div 之 标记 过 的 页 面 更 新 起 来 会 十 分 
容易 ,同时 也 可 以 通过 修改 CSS 的 属性 来 重新 定位 。 

CSS 布局 要 求 设计 者 首先 对 页 面 有 一 个 整体 的 框架 规划 ,包括 整个 页 面 分 为 哪些 模 
块 .各 个 模块 之 间 的 父子 关系 如 何等 。 以 最 简单 的 框架 为 例 ,页 面 是 由 banner, € E A € 
(content) ,菜单 导航 (links) 和 脚注 (footer) 等 几 部 分 组 成 的 ,各 个 部 分 分 别 用 自己 的 id 来 
标识 ,整体 内 容 如 图 4. 54 所 示 。 

图 4.54 中 的 每 个 色 块 都 是 一 个 二 div 二 ,这 里 直接 用 CSS 的 ID 标识 方法 来 表示 各 个 
块 。 页 面 中 的 所 有 DIV 块 都 属于 块 # container, 一 般 的 DIV 布局 都 会 在 最 外 面 加 上 一 个 父 
DIV ,以 便 对 页 面 的 整体 进行 调整 。 对 于 每 个 子 块 DIV, 还 可 以 再 加 入 各 种 块 元 素 或 者 行内 
元 素 。 

1) 设计 各 个 块 的 位 置 

当 页 面 的 内 容 已 经 确定 后 , 则 需要 根据 内 容 本 身 来 考虑 整体 的 页 面 版 型 ,例如 单 栏 、 双 
栏 或 左 中 右 等 。 这 里 考虑 到 导航 条 的 易 用 性 ,采用 了 常见 的 双 栏 模式 ,如 图 4.55 所 示 。 
















































































#container 
#container 
#banner 
#banner | 
#content #links 
#content 
Hlinks | links 
#footer | #footer 
图 4.54 页 面 框架 规划 示意 图 图 4.55 双 栏 模式 示意 图 


在 整体 的 # container 框架 中 页 面 的 banner 在 最 上 方 ,然后 是 内 容 # content 与 导航 条 
#1links, 二 者 在 页 面 的 中 部 ,其 中 # content 占据 整个 页 面 的 主体 。 最 下 方 是 页 面 的 脚注 
# footer, 用 于 显示 版 权 信息 和 注册 日 期 等 。 有 了 页 面 的 整体 框架 后 ,就 可 以 使 用 CSS 对 各 
个 DIV 块 进行 定位 了 。 

2) 使 用 CSS 定位 

整理 好 页 面 的 框架 后 便 可 以 利用 CSS 对 各 个 块 进行 定位 ,实现 对 页 面 的 整体 规划 , 然 
后 再 往 各 个 模块 中 添加 内 容 。 首 先 对 二 body 记 标记 与 # container 父 块 进行 设置 ,代码 
如 下 。 


body{ 
margin: Opx; 
font- size:13px; 
font- family:Arial, Helvetica, sans- serif; 
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} 

#container{ 
position:relative; 
width:100 % ; 

} 


以 上 设置 了 页 面 文字 的 字号 .字体 以 及 父 块 的 宽度 ,让 其 撑 满 整个 浏览 器 。 接 下 来 设置 
#banner 块 ,代码 如 下 。 


# banner{ 
height : 80px; 
border: 1px solid# 000000; 
text - align:center; 
background - color: # a2d9ff; 
padding:10px; 
margin- bottom:2px; 

) 

XX HELLE T # banner 块 的 高 度 , 以 及 一 些 其 他 的 个 性 化 设置 ,当然 也 可 以 根据 自己 的 
需要 进行 调整 。 如 果 # banner 本 身 就 是 一 幅 图 片 ,那么 对 # banner 的 高 度 就 不 需要 设 
ET. 

利用 float 浮动 方式 将 # content 移动 到 左 侧 , #1links 移动 到 页 面 的 右 侧 。 这 里 不 指定 
# content 的 宽度 ,因为 它 需 要 根据 浏览 器 的 变化 而 自己 调整 ,但 # links 作为 导航 条 则 指定 
其 宽度 为 200px。 代 码 如 下 。 

#content{ 

float: left; 
} 
#1inks{ 
float:right; 
width:200px; 
text ~ align:center; 

) 

1E ^) GBC T # content Al # links 的 浮动 属性 后 ,页 面 的 块 并 没有 按照 想象 的 那样 进 
行 移动 ,#1links BAF BI T # content 的 下 方 , 这 是 因为 对 content 没有 设置 宽度 , 它 的 宽度 
仍然 是 整个 页 面 的 100%。 页 面 又 需要 占 满 浏 览 器 的 100 26 ,因此 不 能 设置 # content 的 宽 
度 , 此 时 的 解决 办 法 就 是 将 #links 的 margin-left 设 为 负数 ,强行 往 左 拉 回 200px, 代 码 
如 下 。 


#1inks{ 
float:right; 
width:200px; 
border:1px solid# 000000; 
margin- left: - 200px; / * 往 左 拉 回 200px * / 
text - align:center; 


} 
此 时 会 发 现 #content fJ P 2E 53 # links HARARE TEA. AI FU BE KE FE 9 content 
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的 padding-right 为 一 200px, 在 宽度 不 变 的 情况 下 将 内 容 往 左 挤 回 去 即 可 。 另 外 ,由 于 
# content il # links 都 设置 了 浮动 属性 ,因此 对 #footer 需要 设置 clear 属性 ,使 其 不 受 浮动 
的 影响 。 代 码 如 下 。 


#content{ 
float:left; 
text - align:center; 
padding - right:200px; 
} 
# footer{ 
clear: both; 
text — align:center; 
height : 30px; 
border: 1px solid #000000; 
} 


这 样 ,页 面 的 整体 框架 便 搭建 好 了 。 这 里 需要 指出 的 是 : # content 中 不 能 放宽 度 太 长 
的 元 素 , 和 否则 #1links HE EVR BEF BI # content 的 下 方 。 


4. 常见 版 式 布 局 实战 


CSS 排版 是 一 种 全 新 的 排版 理念 , 它 将 页 面 首先 在 整体 上 进行 二 div 之 标记 的 分 块 , 然 
后 对 各 个 块 进行 CSS 定位 ,最 后 再 往 每 个 块 里 添加 相应 的 内 容 。 通 过 CSS 排版 的 页 面 ,更 
新 容易 ,只 需 修 改 CSS 属性 来 重新 定位 即 可 。 

1) 固定 宽度 且 居中 的 版 式 

首先 将 所 有 的 页 面 内 容 用 一 个 大 的 二 div 二 包围 起 来 ,代码 如 下 。 


<html> 

<head> 

<title > 固定 宽度 且 居 中 的 版 式 </title> 
</head> 

<body> 

<div id= "container"> 页 面具 体内 容 </div> 
</body > 

</html> 


JEE <div> h ID 为 container, 这 个 ID 在 整个 页 面 中 是 唯一 的 。 虽 然 大 部 分 浏览 器 
并 不 限制 重复 ID 的 使 用 ,但 因为 会 使 得 JavaScript 等 脚本 语言 在 寻找 对 象 时 发 生 混 乱 , 所 
以 不 建议 在 同一 个 页 面 中 出 现 重复 的 ID. 

下 面 假设 固定 的 宽度 为 700px, 介 绍 设置 固定 宽度 且 居 中 的 版 式 的 方法 。 代 码 如 下 。 


<head> 
<title> 固 定 宽度 且 居中 的 版 式 </title> 
«style» 
body, html { 
margin:0; 
text - align:center; 
} 


#container{ 
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position:relative; 
margin:0 auto; 
width:700px; 
text - align:left; 
} 
</style> 
</head> 


E ifii 3x BE RESP. H XE <body> fI <html > fp ILHE £18 VE FE Hil, BK 90% 以 上 的 浏 
览 器 都 是 以 二 body 二 为 基准 的 ,但 考虑 到 个 别 情况 ,因此 二 者 同时 声明 ,一 般 情况 下 不 需要 
声明 二 html 二 标记 。 

第 5 行 代 码 “margin: 0;” 指 定 页 面 四 周 的 空 阶 都 为 0。 紧 接着 设置 “text-align;: 
centerj”, 这 是 整个 排版 的 关键 语句 ,即将 页 面 壹 body 之 中 的 所 有 元 素 都 设置 为 居中 , 块 
# container 属于 页 面 的 一 部 分 ,自然 也 居中 对 齐 。 

接 下 来 设置 # container 的 属性 ,“position: relative; ”设置 块 相 对 于 原来 的 位 置 。 但 是 
由 于 过 body> 已 经 居中 ,因此 这 里 不 需要 再 调整 ,只 是 考虑 到 浏览 器 的 兼容 性 ,所 以 加 上 了 
这 句 代 码 。 

container 属性 中 的 “margin:0;auto;” 使 得 该 块 与 页 面 的 上 下 边界 距离 为 0, 左 右边 
则 自动 调整 。 

然后 设 定 “margin:0 auto;”, 这 是 设 定 固 定 宽度 。 最 后 的 “text-align: left;” 用 来 获 盖 
二 body 二 中 设置 的 对 齐 方式 ,使 得 # container 中 的 所 有 内 容 恢 复 左 对 齐 。 

2) 左 中 右 版 式 

将 页 面 分 割 为 左 中 右 三 块 也 是 网 页 中 常见 的 一 种 排版 模式 。 下 面 制 作 的 是 左 栏 # left 
与 右 栏 #right 的 固定 宽度 ,位 置 ,中 间 的 #middle 随 着 页 面 自动 调整 的 布局 方式 。 这 样 
HTML 的 结构 框架 就 已 经 清晰 明了 ,下 面 直 接 用 三 个 和 div 之 块 即 可 。 代 码 如 下 。 

< body> 

<div id= "left"» 

<p>left</p> 
</div> 

<div id= "middle"> 

<p> 正 文 内 容 </p> 
</div> 

<div id= "right"> 

<p>right </p> 

</div> 

</body> 

设置 二 body 二 标记 的 样式 ,包括 margin、padding、 字 体 、 颜 色 和 背景 色 等 ,这 些 对 整体 
结构 都 没有 太 大 的 影响 ,代码 如 下 。 

body{ 

margin: 0px; padding: 0px; 
font- fanily:arial; 
color: #060; 
background-color: #006; 
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SRG OY i E left, € middle Ail £ right (f) FEX. HP, H left 与 #right 都 采用 绝对 定 
位 ,并 且 固 定 块 的 宽度 ,而 #middle 块 由 于 需要 根据 浏览 器 自动 调整 ,因此 不 设置 类 似 的 属 
性 。 但 由 于 将 另外 两 个 块 的 position 属性 设置 为 了 absolute. JER} # middle 的 实际 宽度 为 
100% ,因此 必须 将 它 的 margin-left 和 margin-right 都 设置 为 190px( 左 右 块 的 宽度 ) ,代码 


如 下 。 


#left{ 


} 


position:absolute; 
top: 0px; 

left: 0px; 

margin: 0px; 
background: # FFF; 
width: 190px; 


# middle{ 


} 


padding: 10px; 
background: # FFF; 

margin: 0px 190px Opx 190px; 
margin - top: 0px; 


# right( 


} 


position: absolute; 
top: 0px; 

right : 0px; 

margin: 0px; 
background: # FFF; 
width: 190px; 


/* 固定 宽度 * / 


/* 左右 空 190px */ 


/* 固定 宽度 * / 


这 样 整个 左 中 右 的 框架 就 搭建 好 了 。 这 时 只 需要 将 #left、# middle Ml # right 这 三 个 
块 嵌 套 在 一 个 父 块 中 就 可 以 实现 了 ,代码 如 下 。 


<div id= "banner"></div> 
<div id= "mainbox"> 


<div id="left"></div> 
<div id= "middle"></div> 
<div id= "right"></div> 


</div> 

<div id= "footer"></div> 

30 电子 相册 型 版 式 

CSS 对 电子 相册 的 排版 有 两 种 模式 : 幻灯 片 模式 和 详细 信息 模式 。 下 面 重 点 介绍 详细 
信息 模式 的 电子 相册 的 排版 方法 。 

详细 信息 模式 要 求 每 幅 照 片 的 信息 能 够 显示 在 相片 的 一 侧 ,并 且 不 再 更 改 页 面 的 
HTML 拓扑 结构 。 在 采用 了 CSS 的 DIV 排版 后 , 仅 需 要 在 幻灯 片 的 基础 上 不 再 浮动 即 可 ， 
然后 将 相片 的 超 链接 设置 为 向 左 浮动 ,相片 的 信息 不 再 隐藏 ,关键 代码 如 下 。 


body{ 


Margin:0. 8em; 
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Padding: 0px; 
} 
div. poc{ 
width: 450px; height: 160px; 
margin: 6px; 
padding: 0px; 
} 
div. pic. img{ 
border: 1px solidi 82c3ff; 
} 
div. pic. a. tn{ 
float: left; 
} 


这 样 ,只 需要 简单 地 修改 CSS 文件 即 可 。 


CSS 是 用 于 控制 网 页 样式 并 允许 将 样式 信息 与 网 页 内 容 分 离 的 一 种 标记 性 语言 。 它 
的 引入 就 是 为 了 使 得 HTML 能 更 好 地 适应 页 面 的 美工 设计 。 它 以 HTML 为 基础 ,提供 了 
丰富 的 格式 化 功能 。 本 章 主 要 介绍 了 CSS 的 功能 ,基础 语法 ,以 及 如 何 对 字体 、 段 落 、 图 片 、 
背景 等 应 用 CSS 进行 美化 。 重 点 介绍 了 实际 网 页 开发 中 常见 的 几 种 布局 方式 如 何 用 CSS 


习题 


1. 如 何 将 外 部 CSS 样式 文件 链接 到 某 个 网 页 中 ? 

2. 实现 图 文 混 排 的 核心 语句 是 什么 ? 

3. 操作 题 : 应 用 CSS 十 DIV 完成 以 下 操作 。 

(1) itj —4- 778px X 250px 的 方 框 (ID 命名 为 header) ,相对 整个 页 面 居中 ,背景 颜色 为 
# eeeeee WHE 1px, 实 心 ,颜色 为 红色 。 

(2) 再 画 一 个 778pxX 600px 的 方 框 (ID 命名 为 center) ,相对 整个 页 面 居 中 ,背景 颜色 
为 白色 ,边框 为 1px, 实 心 ,颜色 为 灰色 , 距 header 方 框 间 隔 15px。 

(3) 在 header 方 框 内 ,再 画 两 个 方 框 ,分 两 列 。 

第 一 个 方 框 (id 命名 为 header-left), 左 对 齐 , 距 左边 框 10px, 距 上 边框 20px, 长 为 
300px, 高 为 200px, 背 景 为 蓝 色 ; 

第 二 个 方 框 (id 命名 为 header-right) , 右 对 齐 , 距 右边 框 10px, 上 边框 5px, 长 为 420px， 
高 为 30px, 背 景 为 白色 。 

(4) 在 center 方 框 内 , 画 三 个 方 框 ,分 三 列 左 中 右 排列 。 

左 方 框 id 命名 为 center-left, 宽 150px, 高 400px, 距 左 、 上 边框 各 为 10px, 背 景 随 意 ; 

中 方 框 id 命名 为 center-center, 宽 400px, 高 400px, 距 左 、 上 边框 同样 各 为 10px, 背 景 
随意 ; 
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右 方 框 id 命名 为 center-right, 高 400px, 距 左 、 右 、 上 边框 同样 为 10px, 背 景 随意 ,高 度 
自己 计算 。 

(5) 在 header-right 中 用 ul 和 i 的 形式 写 出 一 组 链接 5 个 1i 排 成 一 行 , 不 允许 换行 ,每 
个 1 的 文字 居中 ,li 前面 不 允许 出 现实 心 圆 点 或 其 他 任何 标记 ; 每 个 1i 的 长 度 为 70px, 链 接 
的 文字 内 容 : 链接 一 ,链接 二 链接 三 ,链接 四 、 链 接 五 (li 的 个 数 是 5 个 ,链接 目标 为 空 
链接 ) 。 

(6) 定义 整个 网 页 的 字号 为 12px, 文 字 颜 色 为 并 666666, 文 字 链 接 的 颜色 同样 为 
#666666,12px 大 小 ,鼠标 移 上 去 的 颜色 为 红色 , 移 除 时 恢复 为 并 666666 。 
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本 章 要 点 : 

° ATA; 

* Spry 效果 ; 

。 JavaScript 介绍 。 


Dreamweaver 内 置 了 多 种 行为 以 及 可 重用 构件 ,可 以 方便 地 在 页 面 中 添加 行为 .插入 
用 标准 HTML、CSS 和 JavaScript 编写 的 Spry 构件 ,设置 构件 的 样式 ,这 样 可 以 实现 更 加 
丰富 的 用 户 交 互 效果 。 


优秀 的 网 站 ,不 仅 包含 文字 和 图 像 ,还 有 很 多 交互 式 的 效果 ,这 种 效果 可 以 通过 
Dreamweaver 中 的 一 项 强大 的 功能 一 一 行为 来 实现 。Dreamweaver 内 置 了 多 种 行为 ,即使 
用 户 不 熟悉 JavaScript 代码 的 书写 ,也 可 以 实现 丰富 的 动态 页 面 效 果 , 达 到 用 户 与 页 面 的 
交互 。 


5.1.1 认识 行为 


Dreamweaver 中 的 行为 是 一 种 运行 在 浏览 器 中 的 JavaScript 代码 ,设计 者 可 以 将 其 设 
置 在 网 页 文档 中 ,以 允许 浏览 器 与 网 页 本 身 进行 交互 ,从 而 以 多 种 方式 更 改 页 面 或 引起 某 次 
任务 的 执行 。 

行为 是 由 Event 事件 和 Action 动作 两 个 基本 元 素 组 成 的 ,通常 ,动作 是 一 段 JavaScript 
代码 ,利用 这 些 代码 可 以 完成 相应 的 任务 ; 而 事件 实际 上 是 浏览 器 生成 的 消息 , 即 事件 由 浏 
览 器 定义 .产生 和 执行 ,指示 该 页 面 中 在 浏览 时 执行 某 种 操作 ,这 样 事件 指明 执行 某 项 动作 
的 条 件 ,例如 ,onMouseOver( 鼠 标 经 过 ) 、onMouseOut( 鼠 标 离 开 ) .onClick( 鼠 标 单 击 ) 等 都 
是 事件 , 当 浏 览 者 将 鼠标 指针 移动 到 某 个 对 象 上 时 ,浏览 器 为 该 对 象 生成 一 个 onMouseOver 
事件 ,然后 浏览 器 查看 是 否 存 在 为 对 象 在 该 事件 发 生 时 应 该 调用 的 JavaScript 代码 。 每 个 
页 面 元 素 所 能 发 生 的 事件 不 尽 相 同 ,例如 ,页 面 文档 本 身 能 发 生 的 onLoad 事件 和 onUnload 
事件 ,分 别 对 应 页 面 被 打开 的 事件 和 页 面 被 关闭 的 事件 。 

从 以 上 内 容 可 以 得 出 结论 ,在 将 行为 附加 到 对 象 后 ,只 要 对 该 对 象 发 生 了 所 指定 的 事 
件 , 浏 览 器 就 会 调用 与 该 事件 关联 的 动作 。 
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在 Dreamweaver CS6 中 ,进行 附加 行为 和 编辑 行为 的 操作 都 将 用 到 ”行为 面板。 执行 
“窗口 "1“ 行 为 "命令 ,打开 “标签 检查 器 ”面板 并 自动 切换 到 “行为 ”选项 卡 中 ,如 图 5.1 所 示 。 
如 果 需 要 进行 附加 行为 的 操作 ,可 以 单 击 “ 行 为 "面板 中 的 “添加 行为 "按钮 国 ,如 图 5. 2 所 
示 , 从 弹出 的 菜单 中 选择 需要 添加 的 行为 。 
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图 5. 1 “行为 ”面板 图 5.2 预 设 的 各 种 行为 


在 “行为 ”面板 上 的 列表 中 选择 一 个 行为 , 单 击 该 项 左 侧 的 事件 栏 ,将 显示 一 个 下 拉 菜 
单 , 如 图 5. 3 所 示 。 菜 单 中 列 出 了 所 选 行为 中 可 用 的 触发 事件 ,可 根据 实际 需要 来 选择 。 





5.3 事件 下 拉 列 表 


5.1.2 向 页 面 添加 行 ; 


添加 行为 就 是 将 行为 添加 到 网 页 中 的 各 个 对 象 中 ,从 而 达到 交互 的 效果 。 行 为 可 以 添 
加 到 整个 文档 中 ,也 可 附加 到 链接 、 图 像 、 表 单元 素 或 其 他 HTML 元 素 中 的 任 一 种 之 上 。 
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在 为 网 页 添加 行为 时 要 按照 以 下 三 个 步骤 来 执行 : 选择 对 象 ; @ 添 加 动作 ; @@ 设 置 触发 
事件 。 

如 果 当 前 网 页 已 经 附加 了 行为 ,那么 行为 将 显示 在 “标签 检查 器 ?面板 上 的 “行为 ”选项 
卡 的 列表 中 。 如 果 需 要 删除 网 页 中 正在 使 用 的 行为 ,可 以 在 列表 中 选择 要 删除 的 行为 , 单 击 
“行为 ”选项 卡 中 的 “删除 事件 ”按钮 嘻 , 即 可 删除 该 行为 。 


1. 交换 图 像 

“交换 图 像 "行为 的 效果 与 鼠标 经 过 图 像 的 效果 是 一 样 的 ,该 行为 通过 更 改 一 img 二 标 
签 中 的 src 属性 将 一 个 图 像 与 另 一 个 图 像 进行 交换 。 

步骤 如 下 : 

(1) 选中 页 面 中 需要 添加 “交换 图 像 ”行为 的 图 像 ,如 图 5.4 所 示 。 








(2) 单 击 “ 标 签 检 查 器 ”中 的 “添加 行为 ”按钮 ,从 弹出 的 菜单 中 选择 “交换 图 像 ” 选 项 , 弹 
出 “交换 图 像 ” 对 话 框 ,设置 如 图 5. 5 所 示 。 单 击 “ 确 定 ” 按 钮 ,完成 “交换 图 像 ? 对 话 框 的 设 
置 ,在 “行为 面板 中 将 自动 添加 相应 的 行为 ,如 图 5.6 所 示 。 
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图 5.5 “交换 图 像 " 对 话 框 
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(3) 保存 页 面 ,在 浏览 器 中 预览 页 面 , 当 鼠 标 移 至 添加 了 “交换 图 像 ”行为 的 图 像 上 时 ， 
可 以 看 到 交换 图 像 的 效果 ,如 图 5.7 所 示 。 
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图 5.6 “行为 ”面板 图 5.7 预览 “交换 图 像 "行为 效果 








当 在 网 页 中 添加 “交换 图 像 ” 行 为 时 ,会 自动 为 页 面 添加 “恢复 交换 图 像 ” 的 行为 ,这 两 个 
行为 的 效果 通常 都 是 一 起 出 现 的 。onMouseOver 触发 事件 表示 当 鼠 标 移 至 图 像 上 时 ， 
onMouseOut 触发 事件 表示 当 鼠 标 移出 图 像 上 时 。 


2. 设置 状态 栏 文本 


使 用 该 行为 可 以 使 页 面 在 浏览 器 左下 方 的 状态 栏 上 显示 一 些 文本 信息 。 如 一 般 的 提示 
链接 内 容 、 显 示 欢 迎 信息 等 ,都 可 以 通过 这 个 行为 的 设置 来 实现 。 该 动作 可 以 加 在 body 标 
签 上 , 当 页 面 载 人 后 ,状态 栏 显示 文本 。 

步骤 如 下 : 

CD 在 标签 选择 器 中 选中 二 body 二 标签 ,如 图 5. 8 所 示 。 

















图 5.8 选中 一 body> 标 签 


(2) 单 击 * 行 为 ”面板 中 的 “添加 行为 ?按钮 国 ,从 弹出 的 菜单 中 依次 选择 “设置 文本 ”| 
“设置 状态 栏 文本 ”, 弹 出 “设置 状态 栏 文本 ”对 话 框 ,在 “消息 ”文本 框 中 输入 显示 在 状态 栏 中 
的 文本 信息 ,如 图 5.9 所 示 。 


动态 网 站 开发 教程 (Dreamweaver+MySQL+PHP) 


ene O 








38: 区 还 天 本 未 页 面 !| ] 
注意 : 并 非 所 有 浏览 器 都 支持 更 改 状态 栏 文本 ， 某 些 浏览 

















器 全 根据 用 广 首选 参数 来 确定 是 否 双 许 此 功能 。 














图 5.9 “设置 状态 栏 文本 "对话 框 


G) 单 击 “ 确 定 ” 按 钮 ,完成 设置 。 此 时 在 “行为 ”面板 中 可 以 看 到 添加 了 一 项 设置 状态 
栏 文本 动作 ,触发 事件 为 onLoad, 如 图 5. 10 所 示 。 








图 5.10 “行为 ”面板 
(4) 执行 “文件 "| 保存 ”命令 ,保存 页 面 。 在 浏览 器 中 预览 页 面 , 可 以 看 到 在 浏览 器 状 
态 栏 上 出 现 了 设置 的 状态 栏 文本 ,如 图 5. 11 Bros 。 


E) C\Users\dongxiaoli\ O ~ © 


Af S80) SEV SERA IAM 帮助 (H) 











5.11 查看 状态 栏 文本 效果 
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6.2 Spry 效果 


Spry 是 一 个 Dreamweaver CS6 中 内 置 的 JavaScript 库 ,网 页 设计 人 员 可 以 使 用 它 构 建 
页 面 效 果 更 加 丰富 的 网 站 ,例如 创建 菜单 栏 . 可 折 生 面板 等 构件 。 在 Dreamweaver CS6 中 
使 用 Spry 构件 比较 简单 ,但 要 求 用 户 具有 HTML.CSS 和 JavaScript 的 相关 基础 知识 。 

Spry 构件 是 网 页 中 的 一 个 页 面 元 素 , 通 过 使 用 Spry 构件 可 以 轻松 实现 更 加 丰富 的 网 
页 交互 效果 ,Spry 构件 主要 由 以 下 几 个 部 分 组 成 。 

CD 构件 结构 ,用 来 定义 Spry 构件 结构 组 成 的 HTML 
代码 块 。 

(2) 构件 行为 ,用 来 控制 Spry 构件 如 何 响应 用 户 启动 
事件 的 JavaScript 脚本 。 

(3) 构件 样式 ,用 来 指定 Spry 构件 外 观 的 CSS 样式 。 

在 Dreamweaver CS6 的 “插入 ”面板 中 的 Spry 选项 卡 
中 提供 了 5 种 Spry 构件 ,如 图 5. 12 所 示 。 

它们 分 别 是 “Spry RE” “Spry 选项 卡 式 面 板 ”、 
“Spry Jr Ex" “Spry nop" “Spry 工具 提示 ”。 

在 Dreamweaver 中 插入 Spry 构件 时 ,会 自动 将 相关 图 5.12 5 种 Spry 构 件 
的 文件 链接 到 页 面 中 ,以 便 Spry 构件 中 包含 该 页 面 的 功 
能 和 样式 。Spry 中 的 每 个 构件 都 与 唯一 的 CSS 和 JavaScript 文件 相关 联 。 在 JavaScript 
脚本 文件 中 实现 了 构件 的 相关 功能 ,而 在 CSS 样式 表 文 件 中 设置 了 构件 的 外 观 样式 。 

注意 : 当 在 页 面 中 插入 Spry 构件 时 ,Dreamweaver CS6 会 自动 在 站 点 的 根 目 录 下 创建 
一 个 名 称 为 SpryAssets 的 目录 ,并 将 相应 的 CSS 样式 表 文 件 和 JavaScript 脚本 文件 保存 在 
该 文件 夹 中 。 


5.2.1 Spry 菜单 栏 


Spry 菜单 栏 是 一 组 可 导航 的 菜单 按钮 ,可 以 使 页 面 在 有 限 的 空间 内 显示 大 量 的 导航 信 
A , 当 鼠 标 指向 某 个 按钮 时 , 即 可 弹出 子 菜单 的 项 目 , 如 图 5. 13 所 示 。 











图 5. 13 菜单 栏 效果 


1. 插入 Spry SEE 


使 用 Spry 菜单 栏 可 以 在 紧凑 的 空间 中 显示 大 量 的 导航 信息 ,并 且 使 浏览 者 能 够 清楚 网 
站 中 的 站 点 目录 结构 。 当 用 户 将 鼠标 移 至 某 个 菜单 栏 按钮 时 ,将 显示 相应 的 子 菜单 。 


144 


动态 网 站 开发 教程 (Dreamweaver+MySQL+PHP) 


步骤 如 下 : 

CD 将 光标 放置 在 页 面 中 需要 插入 Spry 菜单 栏 的 位 置 , 单 击 “ 插 入 ”面板 上 的 Spry 选 
项 卡 中 的 “Spry 菜单 栏 ?按钮 ,如 图 5. 14 所 示 。 弹 出 “Spry 菜单 栏 ?对 话 框 , 如 图 5. 15 
所 示 。 





图 5.14 “插入 ”面板 图 5.15 “Spry 菜单 栏 ”对话 框 


(2) 在 “Spry 菜单 栏 ” 对 话 框 中 可 以 选择 需要 插入 的 两 种 菜单 栏 构件 ,选中 其 中 一 个 选 
项 , 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 Spry 菜单 栏 ,如 图 5. 16 所 示 。 








项 1 "| 项 2 | 项 3 -| 项 上 4 








图 5.16 插入 Spry 菜单 栏 


2. 设置 Spry 菜单 栏 属性 
选中 刚刚 插入 的 Spry 菜单 栏 ,在 “属性 ”面板 上 可 以 对 其 相关 属性 进行 设置 ,如 图 5. 17 





图 5.17 Spry 菜单 栏 的 “属性 ?面板 


菜单 条 : 在 该 文本 框 中 可 以 为 Spry 菜单 栏 命名 。 默 认 情况 下 ,插入 到 页 面 中 的 菜单 栏 
ZU MenuBarl ,MenuBar2 等 的 命名 规则 进行 命名 。 

禁用 样式 : 单 击 该 按钮 即 可 禁用 Spry 菜单 栏 的 CSS 样式 ,以 便 可 以 在 Dreamweaver 
CS6 的 设计 视图 中 查看 菜单 栏 的 HTML 结构 。 注 意 , 单 击 “ 禁 用 样式 ”按钮 ,该 按钮 将 变 为 
“启用 样式 ”按钮 。 

菜单 栏 列表 : 在 “属性 ”面板 的 中 间 位 置 有 三 个 列表 ,从 左 至 右 分 别 为 “ 主 菜单 栏 列表 ”、 
“ 子 菜单 栏 列表 ”、“ 三 级 菜单 栏 列 表 ”, 在 每 个 菜单 项 列表 中 可 以 对 相应 的 菜单 项 进行 添加 、 
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删除 以 及 调整 顺序 等 操作 。 

文本 : 在 该 文本 框 中 可 以 更 改选 中 的 菜单 项 的 名 称 。 

链接 : 在 该 文本 框 中 可 以 为 选中 的 菜单 项 设置 其 相应 的 链接 ,或 者 单 击 * 浏 览 " 按 钮 ,在 
弹出 的 “选择 文件 ”对 话 框 中 选择 需要 的 链接 文件 。 

标题 : 在 该 文本 框 中 可 以 为 选中 的 菜单 项 设置 提示 文本 。 

目标 : 在 该 文本 框 中 可 以 输入 链接 打开 的 方式 。 例 如 ,可 以 为 菜单 项 分 配 一 个 目标 属 
性 ,以 便 浏览 者 单 击 链接 时 ,在 新 的 浏览 器 窗口 中 打开 链接 的 页 面 。 


3. 调整 菜单 项 样式 


在 Dreamweaver CS6 中 提供 的 Spry 构件 ,默认 的 样式 如 果 不 能 满足 用 户 的 需求 ,可 
以 通过 对 Spry 构件 所 生成 的 CSS 样式 表 和 该 Spry 构件 的 显示 外 观 进行 适当 调整 和 
修改 。 

在 设计 窗口 中 选中 需要 禁用 样式 的 菜单 栏 构件 , 单 
击 “ 属 性 ”面板 上 的 “禁用 样式 ”按钮 ,可 以 采用 禁用 菜单 
样式 , 当 禁 用 菜单 样式 后 ,菜单 项 则 会 以 项 目 符号 的 列表 
形式 显示 在 页 面 上 ,而 不 是 显示 为 菜单 栏 中 带 样式 的 菜 
单项 。 效 果 如 图 5. 18 所 示 。 

按钮 转变 为 “启用 样式 ”按钮 ,选中 要 启用 样式 的 菜 
单 栏 构件 , 单 击 “ 属 性 ”面板 上 的 “启用 样式 ”按钮 ,可 以 重 
新 启用 默认 的 Spry 菜单 栏 样式 。 

为 a 二 标签 应 用 的 CSS 样式 中 包含 Spry 菜单 项 文 
本 的 相关 样式 ,要 更 改 Spry 菜单 项 的 文本 样式 ,可 以 通过 
修改 CSS 样式 更 改 其 默认 值 。Spry 菜单 栏 文 本 的 CSS 样式 见 表 5. 1 。 

35.1 Spry 菜单 栏 的 CSS 样式 (1) 





图 5. 18 Spry 菜单 效果 





要 更 改 的 CSS 样式 垂直 或 水 平 Spry 菜单 栏 的 CSS 规则 相关 属性 和 默认 值 
默认 文本 ul. MenuBarVertical a color; #333; 
ul. MenuBarHorizontal a text-decoration: none; 
当 鼠 标 移 过 文本 时 ,文本 ul. MenuBarVertical a: hover color; #FFF; 
的 颜色 ul. MenuBarHorizontal a:hover 
具有 焦点 的 文本 颜色 ul. MenuBarVertical a:focus color: # FFF; 
ul. MenuBarHorizontal a: focus 
当 鼠 标 指针 移 到 菜单 项 ul. MenuBarVertical a. MenuBarItemHover color; # FFF; 
时 ,菜单 栏 的 颜色 ul. MenuBarHorizontal a. MenuBarItemHover 


当 鼠 标 指针 移 过 子 菜单 项 ul. MenuBarVertical a. MenuBarltemSubmenuhover color; # FFF; 
时 , 子 菜单 项 的 文本 颜色 ul. MenuBarHorizontal a. MenuBarItemSubmenuhover 





为 二 a 二 标签 应 用 的 CSS 样式 中 包含 Spry 菜单 项 背景 颜色 的 相关 样式 ,要 更 改 Spry 
菜单 项 的 背景 颜色 ,可 以 通过 表 5. 2 来 查找 相应 的 CSS 样式 ,然后 更 改 其 默认 值 。Spry X 
单 栏 背景 的 CSS 样式 见 表 5. 2。 


Now 
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表 5.2 Spry 菜单 栏 的 CSS 样式 (2) 








要 更 改 的 背景 垂直 或 水 平 Spry 菜单 栏 的 CSS 规则 相关 属性 和 默认 值 

默认 背景 ul. MenuBarVertical a background-color: 
ul. MenuBarHorizontal a # EEE; 

当 鼠 标 移 过 文本 时 ,背景 ul. MenuBarVertical a; hover background-color: 

的 颜色 ul. MenuBarHorizontal a: hover *33C; 

具有 焦点 的 菜单 项 的 背景 ul. MenuBarVertical a: focus background-color: 

颜色 ul. MenuBarHorizontal a:focus *33C; 

当 鼠 标 指 针 移 到 菜单 项 ul. MenuBarVertical a. MenuBarltemHover background-color: 

时 ,菜单 栏 项 的 背景 颜色 ul. MenuBarHorizontal a. MenuBarltemHover # 33C; 


当 鼠 标 指针 移 过 子 菜单 项 ul. MenuBarVertical a. MenuBarltemSubmenuhover background-color; 
时 , 子 菜单 项 的 背景 颜色 ul. MenuBarHorizontal a. MenuBarltemSubmenuhover # 33C; 





4. 制作 网 页 下 拉 菜 单 实例 


CD 执行 “文件 |“ 新建? 命令, 新 建 一 个 空白 的 HTML 页 面 ,将 该 文件 保存 。 单 击 “ 插 
入 ?面板 上 的 Spry 选项 卡 中 的 “Spry 菜单 栏 ?按钮 ,在 页 面 中 插入 Spry 菜单 栏 , 如 图 5. 19 


所 示 。 
项 上 -| 项 目 2 [mas -m4 


图 5.19 插入 Spry 菜单 栏 





(2) 选中 刚刚 插入 的 Spry 菜单 栏 ,在 “属性 ”面板 上 的 “ 主 莱 单 栏 列表 ” 框 中 选择 “项 目 
1” 选 项 ,可 以 在 “ 子 菜单 栏 列 表 ” 框 中 看 到 该 菜单 下 的 子 菜单 项 ,如 图 5. 20 所 示 。 


mm m | 
禁用 样式 


5.20 ”显示 子 菜单 项 























在 * 子 菜单 栏 列表 ” 框 中 选中 需要 删除 的 项 目 , 单 击 其 上 方 的 “删除 菜单 项 "按钮 国 ,可 
以 删除 选中 的 子 菜单 项 ,如 图 5. 21 所 示 。 














me 
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图 5.21 删除 子 菜单 项 


(3) 在 “ 主 菜单 栏 列 表 ” 框 中 选择 “项 目 1” 选 项 ,在 “文本 ”文本 框 中 修改 该 菜单 项 的 名 
称 。 使 用 相同 的 制作 方法 ,修改 其 他 各 主 菜单 项 的 名 称 , 如 图 5. 22 所 示 。 
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图 5.22 修改 菜单 项 名 称 


(4) 单 击 * 主 菜单 栏 列表 ” 框 上 的 * 添 加 菜单 项 "按钮 国 , 可 以 添加 相应 的 主 菜单 项 ,如 
图 5. 23 所 示 。 





图 5.23 添加 主 菜单 项 


在 “ 主 菜单 栏 列表 ” 框 中 选中 某 个 主 菜单 项 ,在 “ 子 菜单 栏 列表 ” 框 中 可 以 添加 相应 的 子 
菜单 项 ,如 图 5. 24 所 示 。 





图 5. 24 添加 子 菜单 项 


(5) 使 用 相同 的 制作 方法 ,完成 Spry 菜单 栏 中 各 菜单 项 的 设置 ,如 图 5. 25 所 示 。 切 换 到 
Spry 菜单 栏 的 外 部 CSS 样式 表 文 件 SpryMenuBarHorizontal. css 中 ,找到 ul. MenuBarHorizontal 
a. MenuBar ItemSubmenu 和 ul. MenuBarHorizontal ul 样式 表 , 如 图 5. 26 所 示 ,将 这 两 个 
CSS 样式 设置 删除 。 


Inr: -| 作品 | 客户 与 服务 -| 创作 中 心 | RARD 


图 5. 25 菜单 栏 的 效果 











ul.MenuBarHorizontal a.MenuBarItemSubmenu 

{ 
background-image: url (SpryMenuBarDown.gif); 
background-repeat: no-repeat; 
background-position: 95% 50%; 


ul.MenuBarHorizontal ul 
{ 

border: 1px solid #CCC; 
} 


图 5. 26 CSS 样 式 代 码 
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(6) 再 找到 ul. MenuBarHorizontal a 样式 表 , 如 图 5. 27 所 示 。 对 样式 进行 相应 修改 ， 


修改 后 如 图 5. 28 所 示 。 
ul.MenuBarHorizontal a 
1 
color:#fff; 
ul.MenuBarHorizontal a font-weight :bold; 

{ display: block; 
display: block; cursor: pointer; 
cursor: pointer; background-color: #9c0; 
background-color: #EEE; border: block; 
padding: 0.5em 0.75em; padding: 0.5em 0.75em; 
color: #333; color: #333; 
text-decoration: none; text-decoration: none; 

Y } 

图 5.27 CSS 样式 代码 图 5.28 修改 后 的 CSS 样式 代码 


CD 返回 到 设计 视图 ,可 以 看 到 下 拉 菜 单 的 效果 。 切 换 到 外 部 CSS 样式 表 文 件 
SpryMenuBarHorizontal. css, 找 到 相应 的 样式 表 , 如 图 5. 29 所 示 。 


ul.MenuBarHorizontal a.MenuBarItemHover, 
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, 
ul.MenuBarHorizontal a.MenuBarSubmenuVisible 
t 

background-color: #33C; 

color: #FFF; 


图 5.29 CSS 样式 代码 


(8) 对 样式 进行 相应 的 修改 ,修改 后 如 图 5. 30 所 示 。 返 回 设计 视图 ,执行 “文件 ”1“ 保 
存 " 命 令 , 弹 出 "复制 相关 文件 ”对 话 框 ,如 图 5. 31 所 示 。 


ul.MenuBarHorizontal a.MenuBarItemHover, 
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, 
ul.MenuBarHorizontal a.MenuBarSubmenuVisible 
{ 

background-color: #ccc; 

color: #FFF; 


图 5.30 修改 后 的 CSS 样式 代码 


I 


XP CBE ius 。 要 使 相应 的 对 象 或 行为 
Spryhssets/SpryllenuBar, js 

Spryhssets/SpryllenuBarDown. gif 

Spryhssets/SpryllenuBarDownHover. gi £ 

Spryhssets/SpryllenuBarHori zontal, css 

SpryAssets/SpryMenuBarRi ght. gif 

SpryAssets/SpryllenuBarRi ghtHover. gif 











5.31 “复制 相关 文件 ”对 话 框 
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(9) 单 击 “确定 ”按钮 ,在 浏览 器 中 预览 页 面 , 可 以 看 到 Spry 菜单 栏 的 效果 ,如 图 5. 32 
所 示 。 


图 5.32 预览 效果 


5.2.2 Spry 选项 卡 式 面板 


Spry 选项 卡 式 面板 构件 是 一 种 面板 ,用 来 将 较 多 内 容 放置 在 紧凑 的 控件 中 , 当 浏 览 者 
单 击 不 同 的 选项 卡 标签 时 , 即 可 打开 相应 的 面板 。 浏 览 者 可 以 通过 单 击 面板 选项 卡 标签 隐 
藏 或 显示 放置 在 选项 卡 式 面板 中 的 内 容 。 


1. 插入 选项 卡 式 面板 


将 光标 放置 在 页 面 中 需要 插入 Spry 选项 卡 式 面 板 的 位 置 , 单 击 “ 插 入 ”面板 上 的 Spry 
选项 卡 中 的 “Spry 选项 卡 式 面板 ”按钮 ,如 图 5. 33 所 示 。 在 页 面 中 插入 Spry 选项 卡 式 面 
板 , 如 图 5. 34 所 示 。 





图 5.33 “插入 ”面板 


内 容 1 


图 5.34 插入 Spry 选项 卡 式 面板 


2. 设置 选项 卡 式 面板 的 属性 


选中 页 面 中 刚 插 入 的 Spry 选项 卡 式 面 板 , 在 “属性 ”面板 上 可 以 对 Spry 选项 卡 式 面板 
的 相关 属性 进行 设置 ,如 图 5. 35 所 示 。 

选项 卡 式 面板 : 在 该 文本 框 中 可 以 为 Spry 选项 卡 式 面板 命名 。 默 认 情 况 下 ,插入 页 面 
中 的 选项 卡 式 面板 会 以 TabbedPanels] ,TabbedPanels2 等 的 命名 规则 命名 。 
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图 5.35 Spry 选项 卡 式 面板 的 “属性 ”面板 


面板 : 在 该 列表 中 显示 了 该 Spry 选项 卡 式 面板 的 各 面板 , 单 击 其 上 方 的 “添加 面板 ” 按 
钮 图 , 即 可 添加 面板 ; 在 列表 中 选中 某 个 面板 , 单 击 列表 上 方 的 “删除 面板 "按钮 局 , 即 可 
删除 该 面板 ,另外 ,还 可 以 调整 面板 的 前 后 顺序 。 

默认 面板 : 在 该 选项 的 下 拉 菜 单 中 列 出 了 Spry 选项 卡 式 面板 的 所 有 面板 名 称 , 选 择 某 
个 面板 名 称 , 在 浏览 器 中 预览 页 面 时 ,在 默认 的 情况 下 ,所 设置 的 面板 将 会 显示 ,其 他 面板 则 
被 隐藏 。 

执行 “文件 ”1“ 保 存 " 命 令 ,保存 页 面 ,弹出 “复制 相关 文件 "对话 框 ,在 该 对 话 框 中 列 出 了 
Spry 选项 卡 式 面板 中 所 用 到 的 JavaScript 脚本 文件 和 外 部 CSS 样式 表 文 件 , 单 击 “ 确 定 ” 按 
钮 ,在 浏览 器 中 预览 页 面 ,可 以 看 到 Spry 选项 卡 式 面板 的 效果 ,如 图 5. 36 所 示 。 

EHE UN 


内 容 1 








图 5.36 预览 Spry 选项 卡 式 面板 


可 以 通过 修改 相关 的 CSS 样式 来 更 改 Spry 选项 卡 式 面板 的 外 观 样 式 。 需 要 切换 到 
Spry 选项 卡 式 面板 的 外 部 样式 表 文 件 SpryTabbedPanels. css 中 ,其 中 ,. TabbedPanelsTab 
样式 表 主 要 定义 了 选项 卡 式 面板 标签 的 默认 状态 ; . TabbedPanelsTabSelected 样式 表 主 要 
定义 了 选项 卡 式 面板 中 当前 选中 标签 的 状态 ; . TabbedPanelsContentGroup 样式 表 定 义 了 
选项 卡 式 面板 内 容 部 分 的 外 观 。 


5.2.3 Spry fr x 


Spry dir X ifi i np WANG AC fi I PSI AE HBL CE — FS 3 8 (09 5 I8] n A TA 590 15 8 5 IR 0 
目的 。 浏 览 者 只 需 单 击 该 构件 的 选项 卡 标签 ,就 可 以 显示 或 隐藏 该 面板 的 内 容 。 当 浏览 者 
单 击 不 同 的 选项 卡 标 签 时 , 折 释 式 构件 的 面板 会 相应 展开 或 收缩 。 


1. 插入 Spry HERH 


将 光标 放置 在 页 面 中 需要 搬入 Spry 折 笃 式 构件 的 位 置 , 单 击 * 插 入 ”面板 上 的 Spry 选 
项 卡 中 的 “Spry Jr" fé B n] fe vt ifi hdd A. Spry rz HE. npe 5.37 Bros. 


2. 设置 Spry 折 又 式 构 件 属性 


选中 页 面 中 刚 插 入 的 Spry 折 和 三 式 构件 ,在 “属性 ?面板 上 可 以 对 其 相关 属性 进行 设置 ， 
如 图 5. 38 所 示 o 
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图 5.37 插入 Spry HERH 


-e 
标签 ! 
BUE Lit Widget 


图 5.38 Spry fr fest" Pe" AR 


WAR: 在 该 文本 框 中 可 以 为 Spry Pree ewe TT oH. ERA EDO F ,插入 到 页 面 中 
的 折 释 式 构 件 会 以 Accordionl , Accordion2 的 命名 规则 进行 命名 。 

面板 : 在 该 选项 的 列表 中 列 出 了 所 选中 的 Spry 折 又 式 构 件 中 的 各 面板 , 单 击 其 上 方 的 
“添加 面板 ”按钮 国 , 即 可 添加 面板 ; 在 列表 中 选中 某 个 面板 , 单 击 列表 上 方 的 “删除 面板 ” 
按钮 国 , 即 可 删除 该 面板 。 另 外 ,还 可 以 调整 面板 的 前 后 顺序 。 

执行 “文件 "| 保存 ”命令 ,保存 页 面 ,弹出 “复制 相关 文件 ”对 话 框 ,在 该 对 话 框 中 列 出 了 
Spry 选项 卡 式 面板 中 所 用 到 的 JavaScript 脚本 文件 和 外 部 CSS 样式 表 文 件 , 单 击 “ 确 定 ” 按 
钮 ,在 浏览 器 中 预览 页 面 ,可 以 看 到 Spry 折 释 式 构 件 的 效果 ,如 图 5. 39 所 示 。 


ED © xsara 

















图 5.39 Spry 折合 式 面板 的 预览 效果 
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3. 设置 Spry HARER 


如 果 需 要 对 Spry 折 释 式 构件 的 文本 样式 进行 设置 和 调整 ,可 以 通过 设置 整个 折 释 式 构 
件 容 器 的 属性 ,或 分 别 设置 构件 的 各 组 件 的 属性 来 实现 。 

要 更 改 Spry 折 释 式 构件 的 文本 样式 ,可 以 修改 相关 的 CSS 样式 ,添加 文本 样式 属性 和 
值 即 可 。 需 要 切换 到 Spry 选项 卡 式 面板 的 外 部 样式 表 文 件 SpryAccordion. css 中 ,其 中 ， 
Accordion 样式 表 主 要 定义 了 整个 折 释 构件 (包括 选项 卡 和 内 容 面板 ) 中 的 文本 的 默认 状 
Æ; .AccordionPanelTab 样式 表 主 要 定义 了 折 靶 式 面板 选项 卡 中 的 文本 的 状态 ; 
. AccordionPanelContent 样式 表 定义 了 折 生 式 内 容 面 板 中 的 文本 的 状态 。 


5.2.4 Spry 可 折 又 面板 


Spry n] Pras i Spry 可 折 释 式 相 似 , 都 是 将 页 面 放 在 一 个 小 的 空间 里 ,达到 节省 页 
面 空 间 的 作用 ,只 是 在 外 观 上 有 所 区 别 。 


1. 插入 Spry RT HE Gl ER 


将 光标 放置 在 页 面 中 需要 插入 Spry "I ir Æ t BD (zr. Ded fi AC" il ER E Spry 3€ 
项 卡 中 的 “Spry nf ira iti po" T BL. BI eT e 9t if rdi A Spry nf irai. MA 5. 40 所 示 。 








图 5.40 插入 Spry Wire ii bc 


2. 设置 Spry 可 折 释 面板 属性 


选中 页 面 中 刚 插入 的 Spry 可 折 丢 面板 ,在 “属性 ?面板 上 可 以 对 其 相关 属性 进行 设置 ， 
如 图 5. 41 所 示 。 








Re — ( 
可 折 醒 面板 示 打 开 v 
collapsibleP anel. 默认 状态 打开 v 

V 启用 动画 

‘BEM Widget 


5.41 Spry 可 折合 面板 属性 


"For ii Ba: 在 该 文本 框 中 可 以 为 Spry 可 折 释 面板 进行 命名 。 默 认 情 况 下 ,插入 到 页 
iii "P AS np pK illi AVA CollapsiblePanell .CollapsiblePanel2 的 命名 规则 进行 命名 。 

显示 : 该 选项 可 以 设置 Spry 可 折 芭 面板 中 在 设计 视图 中 是 打开 的 还 是 关闭 的 。 在 该 
选项 的 下 拉 列 表 中 有 两 个 选项 ,分 别 是 “打开 ”和 “已 关闭 ”, 默 认 情 况 下 ,选择 “打开 ”选项 ,如 果 
在 下 拉 列 表 中 选择 “已 关闭 ”选项 , 则 该 Spry 可 折 对 面板 在 设计 视图 中 是 关闭 的 ,如 图 5. 42 
所 示 。 
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上 


图 5. 42 “显示 ”属性 为 “已 关闭 ” 


默认 状态 : 该 选项 主要 用 于 设置 在 浏览 器 中 浏览 该 Spry nr e I BUNT. RTT E TRE BS 
默认 状态 ,在 该 选项 的 下 拉 列 表 中 同样 有 两 个 选项 ,分 别 是 “打开 ”和 “已 关闭 ”, 默 认 情 况 下 ， 
选择 “打开 ”选项 。 

启用 动画 : 选中 该 复 选 框 ,浏览 者 在 单 击 该 面板 选项 卡 标签 时 ,该 面板 将 缓慢 地 平滑 打 
开 和 关闭 ; 如 果 没 有 选中 该 复 选 框 , 则 浏览 者 在 单 击 该 面板 选项 卡 标签 时 ,可 折 基 面板 会 迅 
速 打开 和 关闭 ,默认 情况 下 ,为 选中 该 复 选 框 。 

执行 “文件 ”1“ 保 存 ” 命 令 ,保存 页 面 ,弹出 “复制 相关 文件 ”对 话 框 , 在 该 对 话 框 中 列 出 了 
Spry 可 折 秋 面板 中 所 用 到 的 JavaScript 脚本 文件 和 外 部 CSS 样式 表 文 件 , 单 击 “ 确 定 ” 按 
钮 ,在 浏览 器 中 预览 页 面 , 可 以 看 到 Spry 可 折 全 面板 的 效果 ,如 图 5. 43 和 图 5. 44 所 示 。 











图 5.43 Spry 可 折合 面板 的 预览 效果 (1) 


© E) CAUsers\dongxiaol\ O ~ C | G 无 标量 文档 x ee 
。 文件 (月 MAC) SEV GERA) IAT) WR) 























5.44 Spry 可 折 全 面板 的 预览 效果 (2) 


3. 设置 Spry 可 折叠 面板 的 样式 


如 果 想 设置 Spry 可 折 释 面板 的 文本 样式 ,可 以 通过 设置 整个 Spry 可 折 释 面板 构件 容 
器 的 属性 或 分 别 设置 构件 的 各 个 组 件 的 属性 来 实现 。 

如 果 需 要 更 改 可 折 秋 面板 的 文本 样式 ,可 以 修改 相关 的 CSS 样式 ,添加 文本 样式 属性 
和 值 即 可 。 需 要 切换 到 Spry 选项 卡 式 面板 的 外 部 样式 表 文 件 SpryCollapsiblePanel. css 
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中 ,其 中 .CollapsiblePane 样 式 表 定义 了 整个 可 折 琶 面板 中 的 文本 的 默认 状态 ; 
. CollapsiblePaneTab 样式 表 定 义 了 面板 选项 卡 中 的 文本 的 状态 ; . CollapsiblePaneContent 
样式 表 定义 了 内 容 面 板 中 的 文本 的 状态 。 


6.3 JavaScript 介绍 


JavaScript 是 一 种 可 以 嵌入 在 HTML 代码 中 由 客户 端 浏览 运行 的 脚本 语言 。 之 前 介 
绍 的 丰富 多 彩 的 行为 效果 ,其 实 都 是 Dreamweaver 在 源 代码 中 加 入 JavaScript 实现 的 。 
JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 且 有 安全 性 能 的 脚本 语言 。 使 用 它 的 目的 是 与 
HTML 一 起 实现 在 一 个 Web 页 面 与 Web 客户 交互 。 它 是 通过 嵌入 在 标准 的 HTML 中 实 
现 的 。 它 的 出 现 弥补 了 HTML 的 缺陷 。JavaScript 是 一 种 比较 简单 的 编程 语言 。 使 用 方 
法 是 向 Web 页 面 的 HTML 文件 中 增加 一 个 脚本 , 当 一 个 支持 JavaScript 的 浏览 器 打开 这 
个 页 面 时 , 它 会 读 出 这 个 脚本 并 执行 其 命令 。 

在 网 页 中 使 用 JavaScript 代码 ,不仅 可 以 实现 网 页 特效 ,还 可 以 响应 用 户 请 求实 现 动 态 
交互 的 功能 。 在 PHP 动态 网 页 中 灵活 运用 JavaScript, 可 以 实现 更 强大 的 功能 。 本 节 将 介 
绍 JavaScript 脚本 语言 的 基本 知识 ,使 读者 在 掌握 基础 内 容 的 前 提 下 能 够 简单 运用 
JavaScript 制作 Web 页 面 。 





5.3.1 JavaScript 概述 
1. 什么 是 JavaScript 


JavaScript 是 由 NetScape Communication Corporation( 网 景 公司 ) 开 发 的 ,是 一 种 基于 
对 象 和 事件 驱动 并 具有 安全 性 能 的 解释 型 脚本 语言 。 它 不 但 可 用 于 编写 客户 端的 脚本 程 
序 , 由 Web 浏览 器 解释 执行 ,而 且 还 可 以 编写 在 服务 器 端 执 行 的 脚本 程序 ,在 服务 器 端 处 理 
用 户 提交 的 信息 并 动态 地 向 浏览 器 返回 处 理 结果 。 


2. JavaScript 的 功能 


JavaScript 是 比较 流行 的 一 种 制作 网 页 特效 的 脚本 语言 , 它 由 客户 端 浏览 器 解释 执行 ， 
可 以 应 用 在 PHP、ASP、JSP 和 ASP. NET 网 站 中 ,同时 目前 比较 热门 的 Ajax 就 是 以 
JavaScript 为 基础 ,由 此 可 见 ,熟练 掌握 并 应 用 JavaScript 对 于 网 站 开发 人 员 非 常 重 要 。 

JavaScript 主要 应 用 于 以 下 几 个 方面 。 

(1) 在 网 页 中 加 入 JavaScript 脚本 代码 ,可 以 使 网 页 具有 动态 交互 的 功能 ,便于 网 站 与 
用 户 间 的 沟通 ,及 时 响应 用 户 的 操作 ,对 提交 的 表单 做 及 时 的 检查 ,如 验证 表单 元 素 是 否 为 
空 ,验证 表单 元 素 是 否 是 数值 型 .检测 表单 元 素 是 否 输入 错误 等 。 

(2) 应 用 JavaScript 脚本 制作 网 页 特效 ,如 动态 的 菜单 、 浮 动 的 广告 等 ,为 页 面 增添 绚 
丽 的 动态 效果 ,使 网 页 内 容 更 加 丰富 、 活 泼 。 

(3) 应 用 JavaScript 脚本 建立 复杂 的 网 页 内 容 , 如 打开 新 窗口 载 入 网 页 。 

(4) 应 用 JavaScript 脚本 可 以 对 用 户 的 不 同事 件 产生 不 同 的 响应 。 

(5) 应 用 JavaScript 制作 各 种 各 样 的 图 片 文字、 鼠标 动画 和 页 面 的 效果 。 
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(6) 应 用 JavaScript 可 以 制作 一 些小 游戏 。 
5.3.2 JavaScript 编程 基础 
JavaScript 的 语法 非常 简单 .所 有 JavaScript 都 是 在 HTML 代码 中 编写 的 ,使 用 二 script 二 


标记 完 
【 例 5.1】 第 一 个 JavaScript 程序 





script 5 01. html, 


<html > 
<head> 
«title» JavaScript 程序 1 «/title» 
<script language = "JavaScript"> 
alert("Welcome! "); 
</script> 
</head> 
«/htnl > 
其 中 ,一 script 二 表示 脚本 语言 的 开始 ,使 用 language 属性 定义 脚本 语言 为 JavaScript. 
在 标记 二 script language 一 "JavaScript" 二 与 二 /script 二 之 间 就 可 以 加 入 JavaScript 脚本 ， 
一 般 而 言 , 过 script 盖 标记 都 是 出 现在 二 head 盖 标记 中 的 ,也 可 以 在 
任意 位 置 上 编写 ,但 是 最 好 在 调用 其 操作 之 前 进行 编写 。 
本 实例 设置 弹出 信息 ,alert ( ) 是 JavaScript 的 窗口 对 象 方 法 ， 
其 功能 是 弹出 一 个 具有 “确定 ”按钮 的 对 话 框 并 显示 括号 中 的 字符 
B ,预览 效果 如 图 5. 45 所 示 。 
如 果 一 个 HTML 页 面 中 编写 包含 很 多 的 JavaScript 代码 ,可 
以 考虑 将 一 些 JavaScript 代码 单独 定义 成 * .js 文件 ,然后 在 需要 
的 页 面 中 导入 即 可 。 E55. PUDE 
[9515.2] EX *.js X fF—— welcome. js. 




















alert("Welcome! "); // 弹 出 一 个 对 话 框 
[B 5.3] 在 二 script 二 标记 中 使 用 src 属性 导入 需要 的 * .js 文件 script 5 02, html, 
<html> 

< head> 


«title» JavaScript 程序 2 </title> 
<script language = "JavaScript" src = "welcome. js"> 
</script> 
</head> 
</html> 
运行 本 程序 时 ,将 welcome. js 中 定义 的 JavaScript 代码 导入 到 页 面 中 执行 ,运行 效果 
和 例 5. 1 效果 相同 。 


5.3.3 调用 JavaScript 脚本 


在 JavaScript 开发 中 最 常用 的 部 分 是 函数 ,也 是 代码 中 最 常用 的 一 种 形式 。 函 数 的 定 
义 语法 格式 如 下 : 
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function 函数 名 称 (参数 1, 参 数 2, … )( 
[return 返回 值 ]; 
} 
在 JavaScript 中 定义 的 函数 不 需要 声明 返回 值 类 型 ,如 果 一 个 函数 需要 有 返回 值 , 则 通 
过 return 语句 返回 即 可 。 
【 例 5.4】 定义 两 个 数字 相 加 的 函数 
<html> 
<head> 
«title» JavaScript 程序 3 </title> 
< script language = "JavaScript"> 
function add(i,j){ 
return it j; 
} 
alert(" 数 字 相 加 的 结果 为 : "+ add(3,5)); 
</script> 
</head> 
</html > 
在 程序 的 add() 函 数 中 接收 两 个 参数 ,通过 return 返回 
这 两 个 数字 相 加 的 结果 ,程序 的 运行 结果 如 图 5. 46 所 示 。 
JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 且 有 安全 性 能 
的 脚本 语言 。 事 件 可 以 使 页 面 获得 更 好 的 交互 效果 。 
JavaScript 的 事件 处 理 主要 围绕 函数 展开 ,一 旦 事件 被 触发 
后 , 则 会 根据 事件 的 类 型 来 调用 相应 的 函数 来 完成 事件 的 处 
理 操 作 。 Vas 
【 例 5.5】 简单 的 事件 处 理 程序 一 script_ 5 04, htm], — 9-16 HAAR Ge treat 





script 5 03. html, 

















<html> 
<head> 
«title» JavaScript 程序 4</title> 
<script language = "JavaScript"> 
function hello() { 
alert(" 欢 迎 光临 本 网 站 ! "); 
) 
function bye()( 
alert(" 感 谢 您 的 访问 ,下 次 再 来 !"); 
} 
</script> 
</head> 
< body onLoad = "hello()" onUnLoad = "bye( )"> 
</body> 
</html> 


7E EU (E <body> br rP 8 In FP AS SE E HP onLoad 表示 网 页 加 载 时 要 触发 的 事 
件 ,一 旦 触发 事件 发 生 后 调用 的 是 helloO 函数 ; onUnLoad 表示 关闭 页 面 时 要 触发 的 事件 ， 
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一 旦 触发 事件 发 生 后 调用 的 是 byeO 函数 。 这 样 , 当 本 页 面 打开 时 出 现 如 图 5. 47(a) 所 示 的 
页 面 , 当 本 页 面 关 闭 时 出 现 如 图 5. 47(b) 所 示 的 页 面 。 





























(a) 页 面 打 开 时 弹出 (b) 页 面 关闭 时 弹出 
图 5.47 网 页 消息 


在 JavaScript 中 有 一 个 OnSubmit 事件 比较 常用 ,此 事件 主要 用 在 表单 提交 时 触发 。 
用 来 检验 表单 提交 的 输入 是 否 合法 ,如 文本 框 中 要 求 输入 的 数据 必须 为 数值 型 数据 等 。 
【 例 5.6】 数值 型 数据 输入 提交 验证 


< html > 
<head> 
«title» JavaScript 程序 5 </title> 
< Script language = "JavaScript"> 
function validate(f) { // 定 义 函 数 
var contenti = f. content. value; // 取 得 输入 的 内 容 
if(!(/^\d+ $/.test(content1))){  ”// 对 输入 的 内 容 进行 验证 ,采用 正则 表达 式 
alert(" 输 入 内 容 必 须 为 数字 !"); // 弹 出 警告 框 





script_5_05. html, 


f. content. focus() ; // 让 焦点 定位 到 content 文本 框 
return false; // 返 回 false, 表单 不 提交 
} 
return true; // 返 回 true, 表单 提交 
} 
</script> 
</head> 
< body> 


< form action ="" method = "post" onSubmit = "return validate(this)"> 
请 您 输入 数字 型 数据 : 
< input type = "text" name = "content"><br> 
< input type = "submit" value = "提交 "> 
</form> 
</body > 
</html> 


7E BUT I <form> tR P f HI OnSubmit 事件 在 表单 提交 前 进行 验证 , 即 该 事件 是 
去 form> 元 素 调用 的 ,此 事件 决定 表单 是 否 提交 ,使 用 return 来 接收 validate O PR BC 3K ul 
值 。 如 果 此 函数 返回 true, 则 表示 提交 的 数据 合法 ,可 以 提交 ; 如 果 此 函数 返回 false, 则 表 
单 将 不 会 提交 。 程 序 的 运行 结果 如 图 5.48(a) 所 示 ,如 果 输 入 非 数值 型 数据 , 则 会 弹出 警告 
HE ,效果 如 图 5. 48(b) 所 示 。 
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(a) 表单 输入 

















(b) 弹出 警告 框 
图 5.48 程序 的 运行 结果 


小 结 


本 章 重点 介绍 了 Dreamweaver 的 高 级 应 用 技巧 ,包括 行为 的 使 用 以 及 Spry 效果 ,网 页 
设计 人 员 可 以 使 用 它们 构建 页 面 效 果 更 加 丰富 的 网 站 ,例如 ,向 网 站 页 面 中 添加 动态 效果 、 
创建 菜单 栏 、 可 折 秋 面板 等 构件 。 无 论 是 行为 还 是 Spry 效果 ,都 需要 JavaScript 语言 的 支 
持 ,Spry 框架 中 的 每 一 个 构件 都 与 唯一 的 CSS 和 JavaScript 文件 相关 联 ,JavaScript 文件 赋 
予 构件 功能 。 本 章 最 后 一 节 介 绍 了 JavaScript 知识 ,读者 可 对 JavaScript 做 简单 的 了 解 ， 
JavaScript 是 基于 对 象 和 事件 驱动 的 解释 型 脚本 语言 , 它 不 但 可 用 于 编写 客户 端的 脚本 程 
序 , 也 可 编写 在 服务 器 端 执行 的 脚本 程序 ,在 服务 器 端 处 理 用 户 提交 的 信息 并 动态 地 向 浏览 
器 返回 处 理 结果 。 





习题 


. 什么 是 行为 ? 什么 是 事件 ? 什么 是 动作 ? 

. 在 网 页 文档 中 添加 某 种 行为 ,一般 需要 哪些 操作 步骤 ? 
. 什么 是 Spry 效果 ? 如 何在 网 页 文档 中 应 用 Spry 效果 ? 
什么 是 JavaScript? 

.如何 定 义 JavaScript 中 的 函数 ? 

.如 何 对 表单 进行 JavaScript 验证 ? 


mw rr- 





本 章 要 点 : 

。 数据 库 的 基本 概念 ; 
。 数据 模型 ; 

。 实体 联系 模型 ; 

。 关系 模型 。 


MySQL 是 关系 型 数据 库 管 理 系统 ,所 使 用 的 SQL 是 用 于 访问 数据 库 的 最 常用 标准 化 
语言 ,为 了 更 好 地 学 习 MySQL ,首先 需要 了 解数 据 库 的 一 些 基 本 知识 。 


6.1 数据 库 的 基本 概念 
— 


1. 数据 

数据 (Data) 是 数据 库 系 统 研 究 和 处 理 的 对 象 .是 信息 的 符号 表示 ,或 称 为 载体 。 数 据 不 
仅 包含 数字 ,还 包括 文本 、 图 像 、 音 频 、 视 频 等 多 媒体 形式 。 

2. 数据 库 

数据 库 (DataBase,DB) 是 长 期 储存 在 计算 机 内 的 \ 有 组 织 的 ( 按 一 定 的 数据 结构 组 织 起 
来 的 ) 、 可 共享 的 数据 集合 。 

3. 数据 库 管 理 系统 

数据 库 管 理 系 统 (DataBase Management,DBMS) 是 位 于 用 户 与 操作 系统 之 间 的 一 层 数 
据 管理 软件 , 它 为 用 户 或 应 用 程序 提供 访问 数据 库 的 方法 ,包括 数据 库 的 建立 查询 .更 新 及 
各 种 数据 控制 。 


DBMS 总 是 基于 某 种 数据 模型 ,可 以 分 为 层次 型 、 网 状 型 .关系 型 和 面向 对 象 型 等 。 目 
前 市 场 上 常见 的 数据 库 管理 系统 包括 Oracle, DB2, Sybase, MySQL 和 SQL Server 等 。 





4. 数据 库 系 统 


数据 库 系 统 (DataBase System,DBS) 是 采用 数据 库 技术 的 计算 机 应 用 系统 。 数 据 、 数 
据 库 数据 库 管 理 系统 与 操作 数据 库 的 应 用 程序 ,加 上 支撑 它们 的 硬件 平台 、 软 件 平台 及 与 
数据 库 有 关 人 员 ,构成 了 一 个 完整 的 数据 库 系统 。 
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6.2 ”数据 模型 


模型 是 对 现实 世界 的 抽象 ,例如 汽车 模型 、 建 筑 模型 , 它 使 人 们 能 从 中 了 解 真实 生活 中 
的 事物 。 数 据 模型 是 对 数据 特征 的 抽象 ,描述 数据 的 共性 。 使 用 计 
算 机 来 解决 现实 世界 中 的 问题 ,需要 把 现实 世界 中 的 具体 事物 抽象 、 

















pom 组 织 为 某 一 数据 库 管理 系统 支持 的 数据 模型 ,抽象 层次 如 图 6.1 
概念 模型 Won. 

pen 1. 数据 模型 中 的 基本 概念 
Eum 在 进行 数据 模型 的 研究 中 经 常用 到 实体 、 属 性、 实 体 间 的 联系 等 








图 6.1 现实 世界 客观 概念 ,下 面 分 别 介绍 。 
对 象 抽象 过 程 ” ”1) 实体 
实体 是 客观 存在 且 可 以 相互 区 别 的 事物 。 实 体 可 以 是 具体 的 对 
象 ,如 一 名 学 生 , 一 辆 汽车 ,也 可 以 是 抽象 的 对 象 ,如 一 项 工程 一 次 会 议 等 。 
2) 属性 
实体 有 很 多 特性 ,每 一 个 特性 称 为 属性 。 每 个 属性 有 一 个 值 域 , 其 类 型 可 以 是 整数 型 、 
实数 型 .字符 类 型 等 。 例 如 ,学 生 有 学 号 、. 姓 名、 年 龄 等 属性 。 


3) 实体 集 

性 质 相 同 的 同类 实体 的 集合 称 为 实体 集 。 例 如 ,全体 学 生 就 是 一 个 实体 集 。 

4) 实体 型 

用 实体 名 及 其 属性 名 集合 来 抽象 和 刻画 同类 实体 , 称 为 实体 型 。 例 如 ,学 生 ( 学 号 , 姓 
名 ,性 别 , 出 生年 月 ,所 在 院 系 ) 。 


5) 实体 标识 符 

能 唯一 标识 实体 的 属性 和 属性 集 的 标识 符 称 为 实体 标识 符 , 有 时 也 称 为 关键 码 ,或 简称 
为 键 。 例 如 ,学 生 的 学 号 可 以 作为 实体 的 标识 符 。 

6) 联系 

联系 用 于 描述 实体 之 间 的 相互 关系 。 与 一 个 联系 有 关 的 实体 集 的 个 数 , 称 为 联系 的 元 
素 。 联 系 有 一 元 联系 、 二 元 联系 、 三 元 联系 。 下 面 主要 介绍 一 下 二 元 联系 。 

二 元 联系 有 以 下 三 种 类 型 。 

(1) 一 对 一 联系 (1: 1) 

如 果 对 于 实体 集 A 中 的 每 一 个 实体 ,实体 集 B 中 至 多 有 一 个 (也 可 以 没有 ) 实 体 与 之 联 
系 ,反之 亦 然 , 则 称 实体 集 A 与 实体 集 B 具有 一 对 一 联系 , 记 为 1 : 1。 

例如 ,学 校 里 面 ,一 个 班级 只 有 一 个 正 班长 ,而 一 个 班长 只 在 一 个 班 中 任职 , 则 班级 与 班 
长 之 间 具 有 一 对 一 联系 。 

(2) 一 对 多 联系 (1 : n) 

如 果 对 于 实体 集 A 中 的 每 一 个 实体 .实体 集 BPA 个 实体 (n 宇 0) 与 之 联系 ,反之 ,对 
于 实体 集 B 中 的 每 一 个 实体 ,实体 集 A 中 至 多 只 有 一 个 实体 与 之 联系 , 则 称 实体 集 A 与 实 
体 集 B 有 一 对 多 联系 , 记 为 1 n 
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例如 ,一 个 班级 中 有 若干 名 学 生 ,而 每 个 学 生 只 在 一 个 班级 中 学 习 , 则 班级 与 学 生 之 间 
具有 一 对 多 联系 。 

(3) 多 对 多 联系 (Cm : n) 

如 果 对 于 实体 集 A 中 的 每 一 个 实体 ,实体 集 B 中 有 个 实体 (n 宇 0) 与 之 联系 ,反之 ,对 
于 实体 集 B 中 的 每 一 个 实体 ,实体 集 A 中 也 有 wm 个 实体 (m 宇 0) 与 之 联系 , 则 称 实体 集 A 与 
实体 集 B 具有 多 对 多 联系 , 记 为 m: n. 

例如 ,一 名 学 生 可 以 选修 多 门 课 程 ,一 门 课程 可 以 被 多 名 学 生 选 修 , 学 生 集合 与 学 校 开 
设 的 课程 集合 之 间 存 在 m : n CR. 





2. 数据 模型 的 分 类 


能 表示 实体 类 型 及 实体 间 联 系 的 模型 称 为 数据 模型 。 数 据 模 型 的 种 类 很 多 ,目前 被 广 
泛 使 用 的 可 分 为 两 种 类 型 。 一 种 是 独立 于 计算 机 系统 的 数据 模型 , 它 完全 不 涉及 信息 在 计 
算 机 中 的 表示 ,这 类 模型 称 为 “概念 数据 模型 ”。 概 念 模型 是 按 用 户 的 观点 对 数据 建 模 , 易 于 
用 户 理解 ,是 对 现实 世界 的 第 一 层 抽象 ,是 用 户 和 数据 库 人 员 进 行 交流 的 工具 。 这 一 类 模型 
中 最 著名 的 是 “实体 联系 模型 ”。 另 一 种 数据 模型 是 直接 面向 数据 库 的 逻辑 结构 ,是 对 现实 
世界 的 第 二 层 抽 象 ,与 数据 库 管理 系统 有 关 , 称 为 “ 迎 辑 数据 模型 ”, 例 如 层次 ` 网 状 . 关 系 、\ 面 
向 对 象 等 模型 。 这 类 模型 有 严格 的 形式 化 定义 ,以 便于 在 计算 机 系统 中 实现 。 本 章 重 点 阐 


6.3 实体 联系 模型 


实体 联系 模型 (Entity Relationship Model, ER 模型 ) 是 P. P. Chen 于 1976 年 提出 的 。 
这 个 模型 直接 从 现实 世界 中 抽象 出 实体 类 型 及 实体 间 联 系 , 然 后 用 实体 联系 图 (ER 图 ) 表 
示 数 据 模型 。ER 图 是 表示 概念 模型 的 有 力 工具 。 

ER 图 有 以 下 三 个 基本 成 分 。 

CD 矩形 框 ,用 于 表示 实体 类 型 (考虑 问题 的 对 象 )。 

(2) 菱形 框 ,用 于 表示 联系 类 型 (实体 间 联 系 )。 

(3) 椭圆 形 框 ,用 于 表示 实体 类 型 和 联系 类 型 的 属性 。 

相应 的 命名 均 写 在 框 中 。 实 体 与 属性 之 间 、 联 系 与 属性 之 间 用 直线 连接 ; 联系 类 型 及 
其 涉及 的 实体 类 型 也 以 直线 相连 ,用 来 表示 它们 之 间 的 联系 ,并 在 直线 端 部 标注 联系 的 类 
型 。 例 如 ,学 生 实体 型 及 其 属性 ER 图 如 图 6. 2 所 示 。 两 个 实体 型 ER 图 实例 如 图 6. 3 
所 示 。 





6.2 学 生 实体 类 型 及 属性 ER 图 
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图 6.3 两 个 实体 类 型 间 的 联系 ER 图 














一 般 地 ,两 个 以 上 的 实体 类 型 之 问 也 存在 着 一 对 一 、 一 对 多 、 多 对 多 联系 。 例 如 ,对 于 课 
程 , 教 师 与 参考 书 三 个 实体 类 型 ,如 果 一 门 课程 可 以 有 若干 个 教师 讲授 ,使 用 若干 本 参考 书 ， 
每 一 个 教师 只 讲授 一 门 课程 ,每 一 本 参考 书 只 供 一 门 课程 使 用 , 则 课程. 教师 与 参考 书 三 者 
之 间 的 联系 是 一 对 多 的 ,如 图 6.4 所 示 。 











课程 








教师 | 参考 书 

















图 6.4 两 个 以 上 实体 型 间 1 : ”联系 ER 图 


下 面 通过 例子 说 明 设计 ER 图 的 过 程 。 

【 例 6. 1】 学 生成 绩 管 理子 系统 : 一 个 系 有 若干 名 学 生 ,一 名 学 生 只 能 在 一 个 系 学 习 ; 
学 校 开 设 多 门 课程 供 学 生 选 修 , 一 名 学 生 可 选修 多 门 课程 ,一 门 课程 可 供 多 名 学 生 选 修 , 为 
学 生成 绩 管理 子 系统 设计 一 个 ER 模型 。ER 图 建立 过 程 如 下 。 

CD 首先 确定 实体 类 型 。 本 题目 有 三 个 实体 类 型 : 学 生 XS. RK DEPT, 课 程 KC. 

(2) 确定 联系 类 型 。DEPT 和 XS 之 间 是 1 : n 联系 ,XS 和 KC 之 间 是 m:n 联系 。 

(3) 把 实体 类 型 和 联系 类 型 组 合成 ER 图 。 

(4) 确定 实体 类 型 和 联系 类 型 的 属性 。 

学 生 (XS) 属 性 : 


学 号 (sno), 姓 名 (sname) ,性别 (sex), 出 生日 期 (bir), 所 在 系 编号 (dno) 

系 (DEPT) 属 性 : 

系 编号 (dno), 系 名 称 (dname), 系 办 公 地 点 (dloc) 

PR EE CXC) JR EE: 

课程 编号 (cno) ,课程 名 称 (cname), 学 期 (term), 学 时 (period), 学 分 (crediit) 
SCCXS fll KC Zia] m * n 联系 ) 属 性 : 
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成 绩 (grade) 


(5) 确定 实体 型 的 主键 ,在 ER 图 中 属于 主键 的 属性 名 下 面 一 条 横 线 。 
本 例 ER 图 如 图 6.5 所 示 。 


DEPT |! e "1 xs "sc »——]| Kc 


OS™ 






































图 6.5 ER 图 实例 


6.4 关系 模型 


关系 模型 是 以 二 维 表格 (关系 表 ) 的 形式 组 织 数据 库 中 的 数据 , 即 用 二 维 表格 表示 实体 
集 。 关 系 模型 是 由 若干 关系 模式 组 成 的 集合 。 它 的 实例 称 为 关系 ,每 个 关系 实际 上 是 一 张 
二 维 表格 。 

如 何 将 例 6. 1 中 的 ER 图 转换 成 关系 模型 ? 转换 的 方法 是 将 ER 图 中 的 实体 类 型 和 联 
系 的 类 型 分 别 转换 成 关系 模式 即 可 ,在 属性 名 下 加 一 横 线 表示 模式 的 键 。1 : n 联系 类 型 
(例如 DEPT 和 XS) 相 应 的 关系 模式 是 与 端 对 应 的 关系 模式 合并 , 即 在 n 端的 关系 模式 
CI XS 模式) 的 属性 中 加 入 另 一 个 关系 模式 (DEPT 模式 ) 的 键 和 联系 本 身 的 属性 ; m:n WK 
系 类 型 相应 的 关系 模式 属性 由 联系 类 型 属性 和 与 之 联系 的 实体 类 型 的 键 一 起 组 合 而 成 。 
例 6. 1 转换 成 的 关系 模式 如 下 : 


XS 模式 (sno,sname,sex,bir,dno) 
DEPT HEX; (dno, dname, dloc) 

KC 模式 (cno,cname, term, period, credit) 
SC 模式 (sno .cno.grade) 





如 图 6. 6 所 示 为 具体 实例 , 即 具 体 的 三 个 关系 。 

1. 关系 模型 的 基本 概念 

1) 关系 

关系 可 以 看 成 是 由 行 和 列 交叉 组 成 的 二 维 表格 , 它 表 示 的 是 一 个 实体 集合 。 


CD 表 中 一 行 称 为 一 个 元 组 ,可 用 来 表示 实体 集中 的 一 个 实体 。 
D 表 中 的 列 称 为 属性 ,给 每 一 列 起 一 个 名 称 即 属性 名 , 表 中 的 属性 名 不 能 相同 。 


163 


MA 


164 


动态 网 站 开发 教程 Dreamweaver+MySQL+PHP) 





























































































































XS 关系 : 
sno sname sex bir dno 
130601 赵 林 林 女 1995-2-10 | 070001 
130602 | 李 芳 女 1994-10-3 | 070002 
130603 | 张强 男 1995-8-8 | 070001 
130000 | 王 彦 军 男 1994-6-10 | 070001 
130605 Pu * 1994-11-1| 070001 
DEPT 关系 : 
dno dname dloc 
070001 | 计算 机 科学 与 技术 系 | 11 号 楼 12 层 1201 
070002 | 网 络 工程 系 11 号 楼 12 层 1202 
070003 | 信息 技术 系 11 号 楼 12 层 1203 
KC 关系 : 
cno cname term period credit 
101 计算 机 文化 基础 1 64 4 
102 面向 对 象 程序 设计 2 64 4 
103 数据 结构 3 64 4 
104 操作 系统 3 48 3 
105 数据 库 原理 4 64 4 
106 离散 数学 3 72 6 
SC 关系 : 
sno cno grade 
070001 101 85 
070002 101 90 
070003 101 87 
070001 102 90 
070002 102 70 




















图 6.6 关系 模型 实例 

(3) 列 的 取 值 范围 称 为 域 , 同 列 具有 相同 的 域 。 例 如 ,年龄 为 整数 域 。 

(4) 表 中 任意 两 行 (元 组 ) 不 能 相同 。 能 唯一 标识 表 中 不 同行 的 属性 或 属性 组 称 为 
主键 。 

尽管 关系 与 二 维 表格 传统 的 数据 文件 有 类 似 之 处 ,但 它们 又 有 区 别 , 严 格 地 说 ,关系 是 
一 种 规范 化 了 的 二 维 表格 ,具有 如 下 性 质 。 

CD 列 是 同 质 的 ; 每 一 列 中 的 分 量 是 同一 类 型 的 数据 ,来 自 同一 域 。 

(2) 不 同 列 可 来 自 同一 个 域 : 不 同 列 (属性 ) 要 给 予 不 同 的 属性 名 。 

(3) 列 的 顺序 无 所 谓 : 列 的 次 序 可 以 任意 交换 。 

(4) 任意 两 个 元 组 不 能 完全 相同 。 

(5) 行 的 顺序 无 所 谓 : 行 的 次 序 可 以 任意 交换 。 

(6) 分 量 必须 取 原 子 值 : 每 一 个 分 量 都 必须 是 不 可 分 的 数据 项 。 
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2) 关系 模式 

关系 模式 是 对 关系 的 描述 , 它 包括 模式 名 ,组 成 该 关系 的 诸 属 性 名 、 值 域名 和 属性 间 数 
据 的 依赖 。 关 系 模式 通常 可 以 简 记 为 : 关系 名 (属性 名 1, 属 性 名 2,…)。 

例如 ,ER 图 表示 的 学 生 情 况 的 部 分 转换 成 相应 的 关系 模式 为 


XS( sno, sname, sex, bir, dno) 


关系 模式 XS 描述 了 学 生 实 体 集 的 数据 结构 。 其 中 ,XS 为 关系 名 ,组 成 该 关系 的 属性 
名 包括 : sno( 学 号 ) ,sname( 姓 名 ) ,sex( 性 别 ),bir( 出 生日 期 ),dno( 所 在 系 )。 

3) fü 

在 关系 数据 库 中 , 键 也 称 码 , 是 关系 模型 的 一 个 重要 概念 。 通 常 键 由 一 个 或 几 个 属性 组 
成 , 键 有 如 下 几 种 类 型 。 

CD 候选 键 : 如 果 一 个 属性 集 能 唯一 标识 元 组 ,上 且 又 不 含有 多 余 的 属性 ,那么 这 个 属性 
集 称 为 关系 的 候选 键 。 候 选 键 中 的 诸 属性 称 为 关系 的 主 属性 。 

(2) 主键 : 若 一 个 关系 中 有 多 个 候选 键 , 则 选 其 中 的 一 个 为 关系 的 主键 。 

(3) 外 键 : 关系 模式 RI 中 的 某 一 属性 (或 属性 组 )F 与 关系 模式 R2 的 主键 相对 应 ,但 
不 是 RI 的 码 , 则 称 是 关系 模式 RI 的 外 键 。 需 要 说 明 的 是 ,R1、R2 不 一 定 是 不 同 的 关系 
模式 ,也 可 以 是 同一 关系 模式 ; 外 键 不 一 定 要 与 相对 应 的 主键 同名 ,只 需 定 义 在 相同 的 值 域 
上 即 可 。 在 实际 应 用 中 ,为 了 便于 辨识 , 当 外 键 与 相对 应 的 主键 位 于 不 同 关系 模式 时 ,通常 
会 给 它们 取 相 同 的 名 字 。 其 中 ,基本 关系 RI 称 为 参照 关系 ,基本 关系 R2 称 为 被 参照 关系 
或 目标 关系 。 

例如 ,学生 关系 模式 XS 和 系 关系 模式 DEPT 分 别 如 下 。 

XS(sno,sname,sex,bir,dno): 学 生 关 系 模式 的 属性 分 别 为 学 号 、 姓 名 、 性 别 \、 年 龄 和 学 
生 所 在 系 编号 。 

DEPT(dno.dname.dloc): 系 关系 模式 的 属性 分 别 为 系 编号 、 系 名 称 、 系 办 公 地 点 。 

学 生 关 系 模式 的 主键 是 sno, 系 关系 模式 的 主键 为 dno, 在 学 生 关系 模式 中 ,dno 是 它 的 
外 键 。 学 生 关系 为 参照 关系 , 系 关系 为 被 参照 关系 。 在 关系 数据 库 中 , 表 与 表 之 间 的 联系 是 
通过 外 键 ( 即 公共 属性 实现 的 。 


2. 关系 模型 的 完整 性 规则 


关系 模型 中 有 三 类 完整 性 规则 ,包括 实体 完整 性 、 参 照 完整 性 和 用 户 自 定义 完整 性 。 

1) 实体 完整 性 规则 

若 属性 ( 指 一 个 或 一 组 属性 )A 是 基本 关系 R 的 主 属性 , 则 属性 A 不 能 取 空 值 。 

[516.2] 在 学 生成 绩 管理 数据 库 中 ,关系 模式 分 别 为 : 

XS (学 号 ,姓名 ,性 别 , 出 生日 期 ,所 在 系 ) 

KC( 课 程 号 ,课程 名 ,学 期 .学 时 ,学 分 ) 

SC (学 号 ,课程 号 ,成 绩 ) 

在 学 生 关系 XS 中 ,“ 学 号 ”为 主键 ,按照 实体 完整 性 规则 , 则 它 不 能 取 空 值 。 选 课 关 系 
中 ,“ 学 号 ”和 “课程 号 ”为 主键 , 则 “学 号 "和 “课程 号 ”两 个 属性 都 不 能 取 空 值 。 

2) 参照 完整 性 规则 

车 属性 (或 属性 组 )F 是 基本 关系 R 的 外 键 , 它 与 基本 关系 S 的 主键 Ks 相对 应 (基本 关 
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系 尺 和 S 不 一 定 是 不 同 的 关系 ), 则 对 于 R 中 每 个 元 组 在 F 上 的 值 必须 为 : 或 者 取 空 值 (F 
的 每 个 属性 值 均 为 空 值 ); 或 者 等 于 S 中 某 个 元 组 的 主键 值 。 

【 例 6.3】 学 生 关系 模式 和 系 关系 模式 如 下 ,其 中 主键 用 下 划 线 标识 : 

XS (学 号 ,姓名 ,性 别 ,出 生日 期 ,所 在 系 编号 ) 

DEPT( 系 编号 , 系 名 称 , 系 办 公 地 点 ) 

这 两 个 关系 之 间 存 在 着 属性 的 引用 , 即 学 生 关系 引用 了 专业 关系 的 主键 “ 系 编号 ”。 显 
然 ,学 生 关系 中 的 “所 在 系 编号 ” 值 必须 是 确实 存在 的 系 编号 , 即 系 关 系 中 应 该 有 该 系 的 记 
录 。 这 也 就 是 说 ,学 生 关 系 中 的 某 个 属性 的 取 值 需要 参照 系 关 系 中 某 个 属性 的 取 值 。 学 生 
关系 的 “所 在 系 编号 ”与 系 关系 的 “ 系 编号 ”相对 应 ,因此 ,“ 所 在 系 编号 "属性 是 学 生 关系 的 外 
键 ,对 应 的 “ 系 编号 ”是 系 关系 的 主键 。 这 里 系 关系 是 被 参照 关系 ,学 生 关系 为 参照 关系 。 

对 于 例子 中 学 生 关 系 中 的 每 个 元 组 的 “所 在 系 编号 ”属性 只 能 取 下 面 两 类 值 : 空 值 , 表 
示 尚 未 给 该 学 生 分 配 系 ; 非 空 值 , 该 值 必须 是 系 关系 中 某 个 元 组 的 “ 系 编号 ”的 值 ,表示 该 学 
生 不 可 能 分 配 到 一 个 不 存在 的 系 中 。 即 被 参照 关系 “ 系 ” 中 一 定 存 在 一 个 元 组 , 它 的 主键 值 
等 于 该 参照 关系 “学 生 ” 中 的 外 键 值 。 

3) 用 户 定义 的 完整 性 规则 

在 建立 关系 模式 时 ,对 属性 定义 了 数据 类 型 ,即使 这 样 可 能 还 满足 不 了 用 户 的 需求 ,此 
时 ,用户 可 以 针对 具体 应 用 设置 完整 性 规则 。 即 用 户 自 定义 的 完整 性 规则 , 它 反映 某 一 具体 
应 用 所 涉及 的 数据 值 必须 满足 的 语义 要 求 。 例 如 , 某 个 属性 必须 取 唯 一 值 , 某 个 属性 的 取 值 
范围 在 0 一 100( 例 如 学 生 的 成 绩 ) 之 间 。 

使 用 关系 模型 的 数据 库 就 是 关系 型 数据 库 。 小 型 的 关系 型 数据 库 管理 系统 包括 
MySQL, Access 等 。 

















小 结 


本 章 概 述 了 数据 库 的 基本 概念 ,数据 模型 是 数据 库 系 统 的 核心 和 基础 。 简 要 介绍 了 概 
念 模型 及 关系 模型 ,概念 模型 用 于 信息 世界 的 建 模 ,ER 模型 是 这 类 模型 的 典型 代表 。ER 
模型 方法 简单 .易于 理解 ,应 用 十 分 广泛 。 关 系 模型 是 目前 最 重要 的 一 种 数据 模型 ,关系 数 
据 库 系统 采用 关系 模型 作为 数据 的 组 织 方式 。 本 书 所 介绍 的 MySQL 数据 库 管理 系统 是 一 
个 小 再 关系 型 数据 库 管 理 系统 。 本 章 概念 较 多 ,如 果 是 刚 开 始 学 习 数据 库 ,可 在 学 习 后 面 章 
节 后 再 回来 理解 和 掌握 这 些 概念 。 


习题 


.什么 是 数据 数据库、 数据 管理 系统 、 数 据 库 系 统 ? 

. 解释 概念 模型 中 以 下 术语 : 实体 ,实体 型 .实体 集 、 属 性 \ 码 ,实体 -联系 图 。 
. 解释 关系 模型 中 以 下 术语 : 关系 、 属 性 、 域 .元 组 . 码 .分量 、 关 系 模式 。 

. 简 述 关系 模型 的 完整 性 规则 。 
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ABER. 

MySQL T X; 

MySQL 服务 器 的 安装 与 配置 ; 

MySQL 的 卸载 ; 

MySQL 软件 的 常用 操作 ; 

MySQL 官方 客户 端 软 件 ; 

MySQL 常用 图 形 化 管理 软件 SQLyog 软件 。 


随 着 数据 库 技术 的 发 展 ,一 些 具 有 免费 使 用 、 配 置 简单 、 稳 定性 好 、 性 能 优良 等 特点 的 开 
源 数据 库 管理 系统 逐渐 流行 起 来 , 且 在 中 低 端 应 用 中 占据 很 大 的 市 场 份额 。 本 书 所 介绍 的 
MySQL 数据 库 管理 系统 是 一 个 小 型 关系 型 数据 库 管理 系统 , 且 是 开源 数据 库 的 杰出 代表 。 
由 于 其 体积 小 .速度 快 ,总 体 拥 有 成 本 低 ,尤其 是 开放 源码 这 一 特点 ,许多 中 小 型 网 站 为 了 降 
低 网 站 总 体 拥有 成 本 而 选择 了 MySQL 作为 网 站 数据 库 。 且 由 于 其 社区 版 的 性 能 卓越 , 搭 
配 PHP 和 Apache 可 组 成 良好 的 开发 环境 。 


7.1 MySQL 下 载 


对 于 不 同 的 操作 系统 ,MySQL 提供 了 相应 的 版 本 。 本 节 将 以 Windows 平台 下 的 图 形 
化 安装 包 为 例 , 详 细 介绍 MySQL 的 下 载 . 安 装 和 配置 等 过 程 。 


1. MySQL 的 各 种 版 本 


目前 MySQL 数据 库 按照 用 户 群 分 为 社区 版 和 企业 版 ,这 两 个 版 本 的 重要 区 别 为 : 社 
区 版 可 以 自由 下 载 且 完全 免费 ,但 是 官方 不 提供 任何 技术 支持 ,适用 于 大 多 数 普通 用 户 ; 企 
业 版 收费 ,但 是 版 本 提供 了 更 多 的 功能 ,可 以 享受 完备 的 技术 支持 ,适用 于 对 数据 库 的 功能 
和 可 靠 性 要 求 比较 高 的 企业 客户 。 

MySQL 版 本 更 新 非常 快 ,常见 的 软件 版 本 有 GA( 官 方 推崇 广泛 使 用 的 版 本 )、RC( 候 
选 版 本 ,该 版 本 最 接近 正式 版 的 版 本 )、Alpha 和 Bean( 这 两 种 版 本 属于 测试 中 版 本 ,其 中 
Alpha 是 指 内 测 版 本 , 指 开发 团队 内 部 测试 的 版 本 或 者 有 限 用 户 体验 测试 版 本 ; Bean 是 指 
公测 版 本 ,针对 所 有 用 户 公开 的 测试 版 本 )。 从 MySQL 版 本 5 开始 支持 触发 器 、 视 图 ,存储 
过 程 等 高 级 特性 。 
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2. 下 载 MySQL 软件 


MySQL 软件 是 完全 网 络 化 的 跨 平台 关系 型 数据 库 , 本 教材 下 载 的 版 本 为 mysql-5. 6. 19. 
可 以 通过 下 面 的 步骤 来 实现 该 平台 的 下 载 , 具 体 如 下 。 
d) 首先 访问 MySQL 的 官方 网 站 (http://www. mysql. com/) ,如 图 7. 1 所 示 。 
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图 7.1 MySQL 官方 网 站 首页 








(2) 打开 MySQL 软件 首页 后 , 单 击 页 面 Downloads(GA) 导 航 栏 , 就 会 进入 MySQL 产 
品 页 面 ,如 图 7.2 所 示 。 在 该 页 面 单 击 社区 版 (MySQL Community Server) 中 的 Download 
超 链 接 , 就 会 进入 下 载 页 面 。 
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图 7.2 下 载 社区 版 
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(3) 在 下 载 页 面 中 首先 选择 Select Platform 下 拉 菜 单 , 在 该 下 拉 菜 单 中 选择 Microsoft 
Windows 平台 ,然后 单 击 Windows (x86. 32-bit? , MSI Installer 选项 右边 的 Download fë 
钮 来 下 载 32 位 的 MySQL 安装 软件 ,如 图 7. 3 所 示 。 
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图 7.3 选择 MySQL 5. 5. 38 


(4) 选择 相应 平台 和 版 本 的 MySQL 软件 后 , 当 单 击 Download 按钮 后 就 会 进入 下 载 的 
页 面 。 下 载 完 mysql-5. 5. 38 后 ,就 可 以 安装 该 数据 库 软 件 了 。 


E MySOL 服务 器 的 安装 与 配置 


1. MySQL 服务 器 的 安装 


下 载 完 数据 库 MySQL 软件 的 安装 程序 后 ,就 可 以 开始 安装 该 数据 库 了 ,具体 的 安装 步 
骤 如 下 。 

(D 双击 MySQL 安装 程序 (mysql-5. 5. 38-win32. msi) ,接着 会 使 用 Windows Intaller 
开始 安装 过 程 , 如 图 7.4 所 示 。 

(2) 单 击 Next 按钮 后 ,在 出 现 的 对 话 框 中 选择 T accept the terms in the License 
Agreement 选项 接受 协议 (如 图 7. 5 所 示 ) ,然后 单 击 Next 按钮 进入 Choose Setup Type 对 
话 框 。 

(3) 在 Choose Setup Type 对 话 框 中 ,选择 Typical 单 选 按钮 (如 图 7. 6 所 示 ) ,就 会 进 
入 Ready to install MySQL Server 5. 5 对 话 框 。 

(4) 在 Ready to install MySQL Server 5. 5 对 话 框 中 确认 一 下 安装 的 信息 , 单 击 Install 
按钮 开始 对 MySQL 软件 的 安装 ,如 图 7.7 所 示 。 
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Wizard. 


Copyright (c) 2000, 2014, Orade and/or its affiiates. Al 
rights reserved, 








i? MySQL Server 5.5 Setup 


End-User License Agreement 
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GNU GENERAL PUBLIC LICENSE 
‘Version 2, June 1991 


Copyright (C) 1989, 1991 Free Software Foundation, Inc., 
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 
Everyone is permitted to copy and distribute verbatim copies 
of this license document, but changing it is not allowed. 


Preamble 


The licenses for most software are designed to take away your 
freedom to share and change it. By contrast, the GNU General Public 
License is intended to guarantee your freedom tc share and change 
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图 7.5 接受 许可 协议 
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Choose Setup Type 
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图 7.6 MySQL 安装 类 型 
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ig MySQL Server 5.5 Setup 


Ready to install MySQL Server 5.5 





Click Install to begin the installation. Click Back to review or change any of your 
installation settings. Click Cancel to exit the wizard. 








图 7.7 安装 信息 的 确认 


(5) 安装 完成 后 , 单 击 Next 按钮 会 进入 一 系列 说 明 界面 ,如 图 7. 8 所 示 。 
NySQL Enterprise 
MySQL: 


its The pees Enterprise Server-The most reliable, secu 





图 7.8 安装 说 明 界 面 


(6) 最 后 进入 安装 完成 的 界面 ,在 该 对 话 框 中 会 询问 是 否 进行 配置 ,如 图 7. 9 所 示 。 如 
果 不 想 现在 进行 配置 ,可 以 取消 选中 的 Launch the MySQL Instance Configuration Wizard 
复 选 框 ,然后 单 击 Finish 按钮 就 会 完成 对 MySQL 软件 的 安装 。 


2. MySOL 服务 器 的 配置 


CD 安装 完毕 后 选择 Launch the MySQL Instance Configuration Wizard 复 选 框 , 单 击 
Finish 按钮 进入 配置 向 导 的 欢迎 界面 , 单 击 界面 中 的 Next 按钮 进入 选择 配置 类 型 界面 ,如 
图 7. 10 所 示 ,配置 类 型 有 两 种 : Detailed Configuration( 详 细 配 置 ) 和 Standard Configuration( 标 








图 7.9 安装 成 功 界面 


准 配置 )。 详 细 配置 选项 适合 想 要 更 加 细 粒 度 控制 服务 器 配置 的 高 级 用 户 ,标准 配置 选项 适 
合 想 要 快速 启动 MySQL 而 不 必 考 虑 服务 器 配置 的 新 用 户 。 


NySQL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.5 server instance. 


Please select a configuration type. 


G Detailed Configuration 
Choose this configuration type to create the optimal server setup for 
this machine, 


C Standard 
Use this only on machines that do not already have a MySQL server 





PA 7.10 选择 配置 类 型 界面 


(2) 在 MySQL 选择 配置 类 型 界面 中 ,如 图 7. 11 所 示 ,选择 Detailed Configuration 选 
项 , 单 击 Next 按钮 进行 服务 器 类 型 选择 ,分 为 三 种 : Developer Machine( 开 发 机 器 ) Server 
Machine( 服 务 器 ) 和 Dedicated MySQL Server Machine( 专 用 MySQL 服务 器 ) 。 

(3) 在 MySQL 选择 应 用 类 型 界面 中 选择 Developer Machine, 然 后 单 击 Next 按钮 进入 
选择 用 途 类 型 界面 ,如 图 7. 12 所 示 , 有 三 个 选项 : Multifunctional Database( 多 功能 数据 
JÆ) „Transactional Database Only( 事 务 性 数据 库 ) 和 Non-Transactional Database Only( 非 
EI PERGE) 。 


Jin 
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NySQL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.5 server instance. 


Please select a server type. This wil influence memory, disk and CPU usage. 

© Developer Machine, 
This is a development machine, ————— 
run on it. MySQL Server should only use a minimal amount 
memory. 


C Server Machine. 


Several server applications will be running on this machine. Choose 
this option for web/application servers. MySQL will have medium 
memory usage. 


(C Dedicated MySQL Server Machine 


This machine is dedicated to run the MySQL Database Server. No 
other servers, Ba a el ot oe Lus wil be run. MySQL will 
utilize up to all available memory. 


s- [oem]. eme 


图 7.11 选择 应 用 类 型 界面 





NySQL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.5 server instance. 


General purpose databases. This wil optmize the server for the use 
of the fast transactional InnoDB storage engine and the high speed 
MyISAM storage engine. 
(C Transactional Database Only 
C tion servers and transactional web applications. 


Optimized for applicat 
This wil make InnoDB the main storage engine. Note that the 
MyISAM engine can stil be used. 


(C Non-Transactional praean 


Suited for simple tions, monitoring or logging applications. 
E irs aes woos, Oy Pe ron Gea NA 
storage engine wil be. 


FEIER 


图 7.12 选择 用 途 类 型 界面 





(4) 在 MySQL 选择 用 途 类 型 界面 中 选择 Multifunctional Database, 然 后 单 击 Next 按 
钮 进入 InnoDB 数据 文件 目录 配置 界面 ,如 图 7. 13 所 示 。InnoDB 数据 文件 会 在 数据 库 第 
一 次 启动 的 时 候 创建 ,默认 位 置 是 在 MySQL 的 安装 目录 下 。 用 户 可 以 根据 实际 的 硬盘 空 
间 状 况 进行 路 径 的 选择 。 

(5) 在 InnoDB 数据 文件 目录 里 配置 界面 中 保留 默认 值 , 然 后 单 击 Next 按钮 进入 并 发 
连接 设置 界面 ,如 图 7. 14 Bros. MySQL 提供 了 三 种 类 型 并 发 处 理 供 选择 , Decision 
Support (DSS)/OLAP( 决 策 支持 ) ,如 果 服 务 器 不 需要 大 量 的 并 行 连接 可 以 选择 该 选项 ; 
Online Transaction ProcessingC OLTP ,联机 事务 处 理 ) .如 果 服 务 器 需要 大 量 的 并 行 连接 则 
选择 该 选项 ; Manual Setting( 手 工 设置 ) ,选择 该 选项 可 以 手动 设置 服务 器 并 行 连 接 的 最 大 
数目 。 
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NySQL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.5 server instance. 





Please select the drive for the InnoDB datafile, if you do not want to use the default settings. 


InnoDB Tablespace Settings 


一 Please choose the drive and directory where the InnoDB tablespace 
should be placed. 


ic m] [installation Path z f 


[Drive Info: 
Volume Name: 
File System: 





| :< cs Diskspace Used 





NySQL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.5 server instance. 





Please set the approximate number of concurrent connections to the server. 


high number of concurrent connections. A number of 20 connections 
will be assumed, 


C Online Transaction Processing (OLTP) 
Choose this option for highly concurrent applications that may have 


at any one time up to 500 active connections such as heavily loaded 
web servers. 


C Manual Setting 
Please enter the approximate number of concurrent connections, 


Concurrent connections: — [is = 
eee | ao omen -l 


7.14. 设置 并 发 连接 数 界 面 








(6) 在 并 发 连接 界面 中 选择 Decision Support (DSS)/OLAP ,然后 单 击 Next 按钮 进入 
网 络 选项 设置 界面 ,如 图 7. 15 所 示 。 默 认 情 况 是 启用 TCP/IP 网 络 ,默认 端口 为 3306。 

CD 在 设置 网 络 选项 界面 中 选择 Enable TCP/IP Networking fll Enable Strict Mode 复 
选 框 ,然后 单 击 Next 按钮 进入 字符 集 设置 界面 ,如 图 7. 16 所 示 ,MySQL 提供 了 三 种 方式 
来 设置 字符 集 ,它们 分 别 为 : Standard Character Set( 标 准 字 符 集 , MySQL. 提供 的 标准 字符 
集 默认 为 Latin1) ,Best Support For Multilingualism( 支 持 多 国语 言 最 好 的 字符 集 ,默认 值 
为 UTF8)、Manual Selected Default Character Set/Collation( 手 工 设置 字符 集 ) 。 

(8) 在 设置 字符 集 选 项 界面 中 选中 Manual Selected Default Character Set/Collation 选 
项 ,在 Character Set 下 拉 框 中 将 latinl 修改 为 gb2312。 单 击 Next 按钮 进入 Windows 服务 
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NySQL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.5 server instance. 





Please set the networking options. 
[V Enable TCP/IP Networking 


Enable this to allow TCP/IP connections, When disabled, only local 
connections through named pipes are alowed. 


PortNumber: 匡 =] [7 Add frewall exception for this port 


Please set the server SQL mode. 


Enable Strict Mode 


This option forces the server to behave more like a traditional 
database server. It is recommended to enable this option. 





图 7.15 设置 网 络 选项 界面 


NySQL Server Instance Configuration Wizard 
MySQL Server Instance Configuration 
Configure the MySQL Server 5.5 server instance. 
Please select the default character set. 
(* Standard Character Set 


(ts) Makes Latin1 the default charset. This character set is suited for 
English and other West European languages. 


C Best Support For Multilingualism 
Make UTF8 the default character set. This is the recommended 
character set for storing textin many different languages. 


C Manual Selected Default Character Set / Collation 
Please specify the character set to use. 


Characterse: [EH |. | 
<Back Next> 

















图 7.16 设置 字符 集 选项 界面 


项 设置 界面 ,如 图 7.17 所 示 。 


在 Windows 选项 设置 界面 ,选项 Install As Windows Service 设置 MySQL 是 否 将 作为 
Windows 的 一 个 服务 ,而 选项 Include Bin Directory in Windows PATH 设置 MySQL 的 


Bin 目录 是 否 写 人 Windows 的 环境 变量 中 。 


(9) 在 Windows 选项 设置 界面 中 将 MySQL 设置 成 名 为 MySQL 的 服务 , 且 将 数据 库 
的 Bin 目录 写 和 人 Windows 的 环境 变量 ,然后 单 击 Next 按钮 进入 安全 选项 设置 界面 ,如 


图 7. 18 所 示 。 


在 设置 安全 选项 界面 中 有 两 个 安全 复 选 框 ,Modify Security Settings 复 选 框 确定 是 否 











修改 用 户 的 root 密码 ,Create An Anonymous Accout 复 选 框 确定 是 否 创建 一 个 匿名 
在 具体 开发 时 ,建议 不 要 创建 匿名 用 户 。 
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NySQL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.5 server instance. 





Please set the Windows options. 


[v Install As Windows Service 
This is the recommended way to run the MySQL server 
on Windows. 


Service Name: [MySQL - 
IV. Launch the MySQL Server automatically 
[^ Include Bin Directory in Windows PATH 
Check this option to indude the directory containing the 


server / dient executables in the Windows PATH variable 
so they can be called from the command Ine. 


NySQL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.5 server instance. 


Please set the security options. 
[v Modify Security Settings 


[^ Enable root access from remote machines 


厂 Create An Anonymous Account 


This option will create an anonymous account on this server. Please 
note that this can lead to an insecure system. 


cs [oem]. cm 


图 7.18 设置 安全 选项 界面 





(10) 在 安全 选项 设置 界面 中 设置 root 用 户 的 密码 ,此 处 密码 设 为 "123456”, 然 后 单 击 
Next 按钮 进入 准备 执行 界面 ,如 图 7. 19 所 示 。 
(OD 确认 设置 没有 问题 后 ,在 准备 执行 界面 中 单 击 Execute 按钮 后 开始 执行 。 执 行 成 
didi 7.20 所 示 。 单 击 Finish 按钮 ,结束 MySQL 的 全 部 配置 。 
装 MySQL 软件 时 ,选择 的 是 Typical 类 型 ,该 类 型 下 的 MySQL 软件 的 安装 文件 在 
C: dui Files\MySQL\MySQL Server 5. 5 这 个 目录 下 ,在 该 目录 下 有 一 个 my. ini X 
件 ,这 是 MySQL 的 选项 文件 ,MySQL 启动 时 会 自动 加 载 该 文件 中 的 一 些 选项 。 可 以 通过 
修改 选项 文件 来 修改 MySQL 的 一 些 默 认 设置 。MySQL 软件 的 数据 库 文件 则 安装 在 C:\ 
Documents and Settings\All Users\ Application Data\MySQL\MySQL Server 5. 5\data H 
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NySQL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.5 server instance. 





Ready to execute... 


O Prepare configuration 
Q Write configuration file 
Q Start service 


O Apply security settings 
Please press [Execute] to start the configuration. 





图 7.19 准备 执行 界面 


了 ySQL Server Instance Configuration Wizard 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.5 server instance. 


Processing configuration … 


Ø Prepare configuration 
(Ø Write configuration file (C:\Program FieslMySQUMySQL Server 5.Simy,ini) 


Press [Finish] to close the Wizard. 





"Hzc 


图 7.20 安装 完成 界面 





录 下 ,在 data 目录 中 MySQL 为 每 个 数据 库 建 立 一 个 文件 夹 ,所 有 的 表 文 件 存 放 在 相应 的 
数据 库 文件 夹 中 。 


9.3 MySQL fy #08 


实现 印 载 MySQL 软件 的 具体 步骤 如 下 。 
(1) 双击 MySQL 安装 程序 (mysql-5. 5. 38-win32. msi), 接着 就 会 使 用 Windows 
Installer 开始 印 载 过 程 , 如 图 7. 21 所 示 。 
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iS NySQL Server 5.5 Setup 


Welcome to the MySQL Server 5.5 Setup 
9 Wizard 


The Setup Wizard will install MySQL Server 5.5 on your 
computer. Click Next to continue or Cancel to exit the Setup 
Wizard. 


Copyright (c) 2000, 2014, Oracle and/or its affiliates. All 
rights reserved. 








图 7.21 印 载 欢迎 界面 


(2) 单 击 Next 按钮 后 ,在 出 现 的 对 话 框 中 单 击 Remove 按钮 进行 和 卸载 操作 ,如 图 7. 22 
所 示 ,就 会 进入 Ready to remove MySQL Server 5. 5 对 话 框 。 


iP MySQL Server 5.5 Setup 


Change, repair, or remove installation 
Select the operation you wish to perform. 


Ci 


Lets you change the way features are installed. 


Crw 1] 


rs errors in the most recent installation by fixing missing and corrupt 


Repair: 
files, shortcuts, and registry entries. 





[ Rm ] 


Removes MySQL Server 5.5 from your computer. 








图 7.22 AHR MySQL 操作 界面 


(3) 在 Ready to remove MySQL Server 5. 5 对 话 框 中 确认 一 下 下 载 的 信息 , 单 击 
Remove 按钮 开始 对 MySQL 软件 的 印 载 ,如 图 7. 23 所 示 。 钾 载 完成 后 就 会 出 现 确认 印 载 
完成 后 的 对 话 框 , 在 该 对 话 框 中 单 击 Finish 按钮 完成 对 MySQL 软件 的 印 载 。 

上 述 步 又 执行 后 ,MySQL 软件 就 可 以 成 功 印 载 。 这 时 可 以 重新 安装 MySQL 软件 , 注 
意 : 在 重新 安装 之 前 ,一 定 要 把 印 载 MySQL 软件 时 没有 删除 干净 的 MySQL 文件 删除 掉 ， 
即 需要 删除 路 径 为 C:\Program Files\MySQL 和 C:\Documents and Settings\All Users\ 
Application Data\MySQL 的 文件 。 
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i8 MySQL Server 5.5 Setup 


Ready to remove MySQL Server 5.5 





Click Remove to remove MySQL Server 5.5 from your computer. Click Back to review or 
change any of your installation settings. Click Cancel to exit the wizard. 


Cea Jem] [om J 





图 7.23 Mae A PL TRI 


0.4 MySQL 软件 的 常用 操作 
A 


7.3 节 介 绍 了 如 何 下 载 . 安 装 、 配 置 和 和 印 载 MySQL, 本 节 将 详细 介绍 MySQL 软件 的 常 
用 操作 : 启动 和 关闭 MySQL 服务 。 

所 谓 MySQL 服务 是 指 一 系列 关于 MySQL 软件 后 台 进 程 ,只 有 启动 了 MySQL 服务 
后 , 才 可 以 连接 MySQL 软件 进行 操作 。 


1. 通过 图 形 界面 启动 和 关闭 MySQL 服务 


对 于 MySQL 数据 库 服务 器 ,只 有 启动 MySQL 服务 ,客户 端 才能 登录 到 MySQL 数 
据 库 。 在 配置 MySQL 的 过 程 中 ,已 经 设置 MySQL 服务 作为 Windows 系统 的 服务 ,服务 
名 为 MySQL。 同 时 选择 Launch the MySQL Server automatically 复 选 框 使 MySQL 服务 
为 自动 启动 型 。 但 由 于 每 运行 一 个 服务 都 会 消耗 一 定 的 系统 资源 ,因此 对 于 一 些 经 常 不 
用 的 服务 最 好 关闭 , 当 需 要 使 用 时 再 开启 。 如 何 启动 和 关闭 MySQL 服务 ”具体 步骤 
如 下 。 

CD 右 击 “我 的 电脑 ”在 出 现 的 菜单 中 选择 “管理 ”命令 ,出 现 如 图 7. 24 所 示 的 “计算 机 
管理 ”窗口 。 

(2) 在 “计算 机 管理 ”窗口 中 选择 “计算 机 管理 (本 地 )”1“ 服 务 和 应 用 程序 ”1“ 服 务 ” 结 点 ， 
在 右边 窗口 中 会 显示 Windows 系统 的 所 有 服务 ,其 中 包括 名 为 MySQL 的 服务 ,如 图 7. 25 
所 示 。 

(3) 查看 MySQL 服务 可 以 发 现 服务 已 经 处 于 启动 状态 ,并 且 该 服务 的 类 型 为 自动 类 
型 。 如 果 想 修改 MySQL 服务 的 状态 ,可 以 单 击 * 计 算 机 管理 ?工具 栏 上 的 相应 按钮 。 其 中 ， 
按钮 ”可 以 实现 启动 服务 功能 按钮 WU 可 以 实现 停止 服务 功能 、 按 钮 wr 可 以 实现 重新 
启动 服务 功能 。 
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m) 文件 E) two 查看 WD sow Keo 
e» MEB e 























图 7.24 “计算 机 管理 ”窗口 
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计算 机 管理 (本 地 ) 

+ jf FARIA 
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服务 和 应 用 程序 Qi Java Quick Starter Pre 

服务 ByKingsoft Core S. 





wr 控件 | Logical Disk Ma. 


由 (ij SQL Server 配置 管理 器 


5 EB 索引 服务 Logical Disk Ma. 
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图 7.25 MySQL 服务 


(4) 对 于 MySQL 服务 ,由 于 不 是 系统 自 带 的 服务 ,所 以 除了 在 需要 时 启动 外 ,还 需要 
设置 启动 类 型 为 手动 类 型 。 在 具体 设置 时 , 需 右 击 MySQL 服务 ,然后 选择 “属性 ”命令 ,出 
JU MySQL 的 属性 ”对 话 框 ,如 图 7. 26 所 示 。 在 该 对 话 框 中 不 仅 可 以 设置 服务 类 型 ,而 且 
还 可 以 操作 服务 。 

关于 三 种 服务 类 型 : 自动 ,Windows 系统 每 次 启动 都 会 自动 启动 该 类 型 服务 ,服务 启动 
后 可 以 手动 将 状态 修改 为 停止 .暂停 和 重新 启动 等 ; 手动 ,该 类 服务 需要 手动 启动 ,启动 后 
可 以 改变 服务 状态 ,如 停止 重新 启动 等 ; 已 禁用 ,该 类 服务 不 能 启动 ,也 不 能 改变 服务 
状态 。 

对 于 MySQL 服务 .如 果 需 要 经 常 操作 MySQL 软件 ,那么 该 服务 最 好 设置 为 自动 启动 
类 型 ; 如 果 使 用 机 会 较 少 ,可 以 将 其 设置 为 手动 启动 类 型 ,这 样 可 以 避免 MySQL 服务 长 时 
间 占 用 系统 资源 。 
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SQL 的 必 性 (本 地 计算 机 ) 回国 
mA [xm [Us | 依存 关系 | 


服务 名 称 MySQL 








ETEW: PL 








HEW 

可 执行 文件 的 路 径 Q0 

FC XProgran FilesWlyS9LWyS9L Server 5.S\bin\mysqld” —defa 
启动 类 型 EE): | 手动 S 
RSRS: 


BDO ERD kz OD 


当 从 此 处 启动 服务 时 ， 您 可 指定 所 适用 的 启动 参数 。 
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图 7.26 设置 MySQL 服务 类 型 





2. 通过 DOS 窗口 启动 和 关闭 MySQL 服务 


除了 可 以 通过 图 形 界面 来 启动 和 关闭 MySQL 服务 外 ,还 可 以 通过 DOS 窗口 启动 和 关 
闭 MySQL 服务 。 

具体 步骤 如 下 。 

CD 通过 “开始 ”1“ 运 行 ” 命 令 打开 “运行 ”对话 框 ,然后 在 该 对 话 框 中 输入 “cmd” 命 令 来 
打开 DOS 窗口 ,如 图 7. 27 所 示 。 


€) bem 





打开 Q): [m x) 








图 7. 27 “运行 ?对 话 框 


(2) 在 DOS 窗口 中 ,如 果 想 查看 Windows 系统 已 经 启动 的 服务 ,可 以 通过 如 下 命令 
实现 : net start, 具 体 运行 过 程 如 图 7. 28 Bros ,可 以 发 现 MySQL 软件 的 服务 MySQL 已 经 
启动 。 

(3) 如 果 MySQL 软件 的 服务 MySQL 已 经 启动 ,可 以 通过 命令 来 关闭 MySQL 服务 ， 
具体 命令 如 下 : net stop ”MySQL ,具体 运行 过 程 如 图 7. 29 所 示 。 

(4) 如 果 MySQL 软件 的 服务 MySQL 处 于 关闭 状态 ,可 以 通过 命令 来 启动 MySQL 服 
务 ,具体 命令 如 下 : net start MySQL, 具体 运行 过 程 如 图 7. 30 所 示 。 


and Settin 
Windous 服 





ation Layer Gateway Service 
Ati HotKey Poller 

Automatic Updates 

COM* Event System 

Computer Browser 

Cryptographic Servic 

DCOM Server Process 

DefWatch 

DHCP Client 

DNS Client 

Event Log 

Fast User Switching Compatibility 
Java Quick Starter 

Kingsoft Core Service 


k Connections 











图 7.28 查看 已 经 启动 的 服务 


TNDOWS\systea32Vcad- exe 


IC: NDocunents and Settings Administrator> 











图 7.29 关闭 MySQL 服务 


c C: WINDOWSAsysten32Vcnd. exe 


C:\Documents and Settin 














图 7.30 启动 MySQL 服务 


7.5 MySOL 官方 客户 端 软件 


由 于 MySQL 软件 是 基于 C/S 模式 的 数据 库 管 理 系统 ,因此 可 以 通过 各 种 客户 端 软 
件 来 与 MySQL 数据 库 管理 系统 相关 联 。 针 对 MySQL 软件 ,MySQL 公司 开发 了 众多 的 
客户 端 软件 来 帮助 用 户 使 用 MySQL 数据 库 管理 系统 ,最 著名 的 就 是 MySQL Command 
Line Client 和 MySQL-Workbench 客户 端 软件 。 本 节 
Client. 






点 介绍 MySQL Command Line 
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1. MySOL 命令 行 客户 端 软件 


MySQL 安装 和 配置 完 后 ,一 般 都 会 安装 一 个 简单 命令 行 实用 程序 (MySQL Command 
Line Client) 。 该 客户 端 没 有 下 拉 菜 单 , 没 有 流行 的 用 户 界 面 ,但 它 是 众多 MySQL 客户 端 
软件 中 实用 功能 最 多 的 工具 之 一 , 它 可 以 快速 地 登录 和 操作 MySQL 软件 。 

PEPE FF UR” | “FEE” | MySQL| MySQL Server 5. 5|] MySQL Command Line Client 菜单 
项 ,进入 MySQL 客户 端 , 如 图 7. 31 所 示 。 在 客户 端 输入 正确 的 密码 ,就 以 root 用 户 身 份 登 
录 到 MySQL 服务 器 。 注 意 前 提 是 MySQL 软件 的 服务 必须 处 于 启动 状态 。 








图 7.31 运行 MySQL Command Line Client 程序 





| = HySQL 5.5 Command Line Client MEE 


当 通 过 MySQL Command Line Client 程序 登录 到 服务 器 后 ,如 图 7. 32 所 示 , 首 先 会 输 
出 一 段 欢迎 内 容 和 一 个 MySQL 二 ”命令 提示 符 。 在 该 命令 提示 符 后 输入 相应 内 容 , 比 如 
SQL 语句 ,同时 并 以 分 号 (; ) 来 结束 ,然后 按 Enter 键 就 可 以 操作 MySQL 数据 库 。 以 root 
用 户 身 份 登录 可 以 对 数据 库 进行 所 有 的 操作 。 








SQL 5.5 Command Line Client [-|S[x] 


Enter password: xxxxxx 
Melcome to the MySQL monit: Commands end with ; or Ng. 
Your MySQL connection id is 1 

Server version: 5.5.37 MySQL Community Server (GPL? 





Copyright <c) 2888, 2614, Oracle and/or its affiliates. All rig! reserved. 


a registered trademark of Oracle Corporation and/or 


~ Other names may be trademarks of their pect ive 


3’ or ’\h’ for help. Type '*c' to clear the current input statement. 











图 7.32 登录 到 MySQL 数据 库 


2. 通过 DOS 窗口 连接 MySOL 软件 


在 Windows 中 还 可 以 通过 DOS 窗口 来 登录 MySQL 软件 ,这 种 登录 方式 的 具体 步骤 
如 下 。 

CD 通过 “开始 ”1“ 运 行 ” 命 令 打 开 “ 运 行 " 对 话 框 ,然后 在 该 对 话 框 中 输入 “cmd” 命 令 来 
打开 DOS 窗口 。 

(2) 在 DOS 窗口 中 ,可 以 通过 mysql 命令 来 登录 MySQL 软件 ,具体 命令 如 下 : mysql- 
h 127. 0. 0. 1-u root-p 

代码 说 明 : mysql 是 登录 MySQL 软件 的 命令 ,选项 -h 表示 需要 登录 MySQL 软件 的 
IP 地 址 ,选项 -u 表示 登录 MySQL 软件 的 用 户 名 ,选项 -p 表示 登录 MySQL 软件 的 密码 。 
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运行 效果 : 具体 运行 过 程 如 图 7.33 所 示 。 当 提示 输入 密码 时 ,输入 正确 密码 则 会 输出 
- 段 欢迎 内 容 和 一 个 “mysql 二 ”提示 符 , 这 时 表示 登录 到 MySQL 软件 


NDocunent 
Enter p. 

Welcome to the MySQL monitor. Commands end with ; or *g. 
Nour MySQL connection id is 2 

Server version: 5.5.37 MySQL Community Server (GPL) 





Copyright <c> 2880, 2014, Oracle and/or its affiliates. All rights r 


registered trademark of Oracle Corporation and/or its 
Other names may he trademarks of their respective 


[Type 'help;' or '*h' for help. Type ’\c’ to clear the current input statement. 


Inysql> m 





Vd 7.33 登录 MySQL 软件 


通过 上 述 步骤 就 可 以 成 功 连接 到 MySQL 软件 。 当 在 DOS 窗口 中 执行 “mysql-h 127. 
0. 0. 1-u root-p” 命 令 时 ,有 时 会 出 现 提示 “mysgl 不 是 内 部 命令 ,也 不 是 可 运行 的 程序 和 批 
处 理 文件 ”的 错误 ,该 错误 原因 是 由 于 在 配置 MySQL 软件 时 ,在 如 图 7. 34 所 示 的 界面 中 没 
有 选择 Include Bin Directory in Windows PATH 复 选 框 。 为 了 解决 上 述 错误 ,除了 可 以 重 
新 配置 MySQL 软件 外 ,还 可 以 通过 配置 环境 变量 path 来 实现 。 具 体 步 又 请 查阅 相关 
资料 。 






My5QL Server Instance Configuration Wizard 






MySQL Server Instance Configuration 







Configure the MySQL Server 5.5 server instance. 


Please set the Windows options. 









[V Install As Windows Service 


57%, Thisis the recommended way to run the MySQL server 
on Windows. 


Service Name: [MySQL z] 


Tv. Launch the MYSQL Server automaticaly 











| 厂 Include Bin Directory in Windows PATH 
Check this option to indude the directory containing the 
server / dient executables in the Windows PATH variable 
so they can be called from the command line. 





con co 








图 7.34 设置 MySQL 命令 


7.6 MySOL 常用 图 形 化 管理 软件 SOLyog 软件 


除了 MySQL 官方 提供 的 客户 端 软 件 外 ,很 多 公司 也 开发 了 自己 的 客户 端 软件 。 
SQLyog 客户 端 软件 由 世界 著名 的 Webyog 公司 研制 ,是 专门 针对 MySQL 数据 库 的 图 形 


FSIS MySQL Zire Pe Se 


化 管理 工具 。 该 客户 端 软件 的 突出 特点 是 简洁 高 效 、 功 能 强大 。 
1. 下 载 SQLyog 软件 


可 以 通过 下 面 的 步骤 来 实现 该 平台 的 下 载 , 具 体 如 下 。 
(D 首先 访问 下 载 SQLyog 的 官方 网 站 (http://www. webyog. com/), 如 图 7. 35 
所 示 。 


V 3 sot cur Tools. mysot Monitor x BB 





€ ft D 4 ios webyog com =-->) = 
4 
ee, 
«e Webyog 
. EZB 9 Shor Domload Trials Customer Login Community Blog 


2, 000, 000 USERS OUR CUSTOME 
30, 000 COMPANIES 





FOR DEVELOPERS FOR DBAs 
AY SQLyog MySQL GUI S MONyog lvsd CNN 
图 7.35 SQLyog 首页 


(2) 打开 SQLyog 首页 后 , 单 击 Downloads 超级 链接 ,进入 下 载 页 面 ,如 图 7. 36 所 示 。 
在 该 页 面 中 单 击 Download-v11. 5. 0-1-32 bit 超级 链接 ,就 会 实现 SQLyog 软件 的 下 载 。 


Jf o saveo mysar cdr, via cur «NER 


€ > € f Bi [4 Gruss webyog comlprodoct -je 
Jownloads Buy Features Quick Links 
Downloads 


Download - v11.5.0-1 - 32 bit 
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SQLyog-11. 5. 0-1. x86Trial 为 试用 版 ,可 以 免费 使 用 30 天 。 
2. 安装 SOLyog 软件 


下 载 完 成 后 ,就 可 以 安装 SQLyog 客户 端 软件 。 具 体 安 装 步 又 如 下 。 

(1) 双击 SQLyog-11. 5. 0-1. x86Trial. exe 安装 程序 ,使 用 Windows Installer 开始 安装 
过 程 ,首先 会 出 现 Please select a language 对 话 框 ,为 了 便于 使 用 ,在 该 对 话 框 中 选择 
Chinese(Simplified) 语 句 , 单 击 OK 按钮 进入 下 一 界面 。 

(2) 在 欢迎 界面 中 单 击 “ 下 一 步 ” 按 钮 ,进入 “许可 证 协议 ”对 话 框 ,在 对 话 框 中 选择 “我 
接受 许可 证 协议 的 条 款 ” 单 选 按 钮 , 单 击 * 下 一 步 ” 按 钮 进入 “选择 组 件 ” 对 话 框 。 

(3) 在 “选择 组 件 ” 对 话 框 中 ,选择 相应 的 组 件 , 然 后 单 击 “ 下 一 步 " 按 钮 进入 “选择 安装 
目录 ”对 话 框 。 

(4) 在 “选择 安装 目录 ”对 话 框 中 ,采用 默认 的 安装 目录 设置 ,用 户 也 可 修改 ,然后 单 击 
“安装 ”按钮 进行 自动 安装 。 当 自动 安装 完成 后 , 单 击 * 下 一 步 按 钮 后 ,进入 安装 完成 对 话 
框 , 单 击 “ 完 成 ”按钮 完成 对 SQLyog 客户 端 软件 的 安装 。 


3. 通过 SOLyog 客户 端 软 件 登录 MySOL 软件 


SQLyog 客户 端 软件 的 功能 非常 全 面 ,包含 数据 库 的 管理 数据 对 象 的 管理 、 数 据 导入 
和 导出 、 数 据 管理 等 功能 。 

双击 SQLyog 快捷 方式 ,打开 该 软件 登录 界面 ,正确 输入 服务 器 的 地 址 ,用户 名 、 密 码 、 
端口 (如 图 7.37 所 示 ), 单 击 * 连 接 ” 按 钮 就 可 以 连接 和 登录 数据 库 服务 器 了 ,这 时 会 进入 
SQLyog 软件 的 操作 界面 ,如 图 7. 38 所 示 。 
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图 7.37 登录 界面 
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1d 7.38 操作 界面 


小 结 
— 

本 章 介 绍 了 目前 常用 的 MySQL 关系 型 数据 库 管 理 系 统 , 包 括 MySQL 软件 的 下 载 、 安 
EVA BAAR. MySQL 服务 器 的 启动 和 停止 ,MySQL 的 使 用 方法 ,包括 命令 行 客 户 端 以 及 界 
面 客户 端 工具 登录 服务 器 。 需 重点 掌握 MySQL 关系 型 数据 库 管 理 系 统 的 使 用 (包括 服务 
器 的 启动 和 关闭 .登录 服务 器 ) ,为 进一步 学 习 MySQL 软件 应 用 打 好 基础 。 


1. 安装 MySQL 服务 器 并 进行 配置 。 
2. 练习 关闭 、 启 动 MySQL 服务 。 
3. 练习 使 用 命令 行 客户 端 登录 服务 器 。 


第 
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MySQL 数 据 库 的 基本 操作 | 
本 章 要 点 : 
* MySQL 数据 库 、 数 据 库 对 象 及 数据 类 型 ; 


* MySQL 数据 库 备份 与 恢复 。 


数据 库 可 以 看 成 是 存储 数据 对 象 的 容器 ,这 些 数据 对 象 包括 表 、 视 图 等 。 其 中 , 表 是 最 
基本 的 数据 对 象 ,用 来 存放 数据 。MySQL 通常 采用 命令 行 方式 创建 操作 数据 库 和 数据 对 
象 ,也 可 以 通过 界面 管理 工具 创建 .操作 数据 库 和 数据 对 象 。 数 据 库 和 表 创 建成 功 后 ,主要 
通过 SQL 语句 来 对 表 中 数据 进行 操作 ,包括 增加 、 人 和 修改、 删除 .查询 数据 。 其 中 ,数据 的 增 
加 、 修 改 、 删 除 也 可 通过 界面 管理 工具 来 完成 。 本 章 重点 讨论 MySQL 数据 库 以 及 数据 库 对 
象 等 的 创建 与 使 用 方法 。 


8.1 MySOL 数据 库 ,数据 库 对 象 及 数据 类 型 


对 于 MySQL 服务 器 , 当 连 接 上 MySQL 服务 器 后 ,就 可 以 操作 数据 库 里 存储 到 数据 库 
对 象 中 的 数据 了 。 


8.1.1 MySQL 数据 库 分 类 


在 MySQL 软件 中 ,数据 库 可 以 分 为 系统 数据 库 和 用 户 数据 库 两 大 类 。 
1. 系统 数据 库 





系统 数据 库 是 指 安装 完 MySQL 服务 器 后 ,会 附带 的 一 些 数据 库 , 如 图 8. 1 所 示 。 系 统 
数据 库 会 记录 一 些 必需 的 信息 ,用 户 不 能 直接 修改 这 些 系统 数据 库 。 各 个 系统 数据 库 的 作 
用 如 下 。 

(1) information schema: 主要 存储 了 系统 中 的 一 些 数据 库 对 象 信息 ,例如 用 户 表 信 
息 , 列 信息 、 权 限 信息 ,字符 集 信息 等 。 —— 

(2) performance | schema; 主要 存储 数据 库 服 务 器 性 








国 
能 参数 。 A B prinese 
(3) mysql, 主要 存储 了 系统 的 用 户 权限 信息 。 MT 





(4) test: 该 数据 库 为 MySQL 数据 库 管理 系统 自动 创 图 8.1 系统 数据 库 
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建 的 测试 数据 库 ,任何 用 户 都 可 以 使 用 。 
2. 用 户 数据 库 


用 户 数据 库 是 用 户 根据 实际 需求 创建 的 数据 库 , 如 图 8. 2 所 示 。 其 中 ,xscj 数据 库 就 属 
于 用 户 数据 库 。 数 据 库 可 以 看 作 是 一 个 存储 数据 对 象 的 容器 ,在 MySQL 中 ,这 些 数据 对 象 
主要 包含 表 , 视 图 、 存 储 过 程 、 函 数 、 触 发 占 和 事件 等 。 
在 SQLyog 客户 端 软件 的 “对 象 资源 管理 器 ”中 ,每 个 数据 库 结 点 下 都 拥有 一 个 树 状 路 
径 结构 ,如 图 8. 3 所 示 。 其 中 , 树 状 结构 中 的 每 个 具体 子 结 点 都 是 数据 库 对 象 。 
ig root@localhost 
@ É information scheme 
a aysa 
@ E performance_schema 


Bl test 
a 


B 
国 
国 
国 
国 





图 8.2 用 户 数据 库 图 8.3 数据 库 对 象 


8.1.2 MySQL 的 数据 库 对 和 象 


数据 库 可 以 看 作 是 一 个 存储 数据 对 象 的 容器 ,在 MySQL 中 ,这 些 数据 对 象 包括 以 下 
几 种 。 


1. 表 


表 是 MySQL 中 最 主要 的 数据 库 对 象 ,是 用 来 存储 和 操作 数据 的 一 种 旭 辑 结构 。 表 由 
行 和 列 组 成 ,因此 也 称 为 二 维 表 。 


2. 视图 


视图 是 从 一 个 或 多 个 基本 表 中 引出 的 表 。 本 质 上 是 一 种 虚拟 表 , 其 内 容 与 真实 的 表 相 
似 ,包含 一 系列 带 有 名 称 的 列 和 行 数据 ,在 数据 库 中 只 存放 视图 的 定义 ,而 不 存放 视图 对 
应 的 数据 ,这 些 数据 仍 存放 在 导出 视图 的 基本 表 中 。 当 基本 表 的 数据 发 生变 化 时 ,从 视 
图 中 查询 出 来 的 数据 也 随 之 改变 。 视 图 一 经 定义 ,就 可 以 像 基 本 表 一 样 被 查询 .修改 、 删 
除 和 更 新 。 


3. 存储 过 程 和 函数 


存储 过 程 和 函数 用 来 实现 将 一 组 关于 表 的 操作 的 SQL 语句 代码 当 作 一 个 整体 来 执行 ， 
两 者 的 区 别 主要 是 函数 必须 有 返回 值 ,而 存储 过 程 则 没有 。 在 数据 库 系 统 中 , 当 调 用 存储 过 
程 和 函数 时 , 则 会 执行 这 些 对 象 中 所 设置 的 SQL 语句 组 从 而 实现 相应 的 功能 。 











189 








动态 网 站 开发 教程 (Dreamweaver+MySQL+PHP) 
4. 触发 器 和 事件 
和 触发 器 用 来 实现 由 一 些 表 事 件 ( 例 如 表 中 数据 更 新 或 删除 时 ) 触 发 某 个 操作 。 在 数据 库 
系统 中 , 当 执 行 表 事件 时 , 则 会 激活 触发 器 从 而 执行 其 包含 的 操作 。 
8.1.3 MySQL 数据 类 型 
在 创建 表 的 列 时 ,必须 为 其 指定 数据 类 型 , 列 的 数据 类 型 决定 了 数据 的 取 值 .范围 和 存 
储 格 式 。MySQL 提供 了 丰富 的 数据 类 型 ,如 表 8. 1 所 示 。 
表 8.1 MySQL 数据 类 型 
数据 类 型 符号 标志 
整数 型 BIGINT, INT. SMALLINT, MEDIUMINT, TINYINT 
精确 数值 型 DECIMAL, NUMERIC 
浮 点 型 FLOAT. REAL. DOUBLE 
位 型 BIT 
字符 型 CHAR, VARCHAR, LONGVARCHAR, LONGTEXT 
Unicode 字符 型 NCHAR. NVARCHAR 
BLOB 类 型 TINYBLOB, BLOB, MEDIUMBLOB, LONGBLOB 
文本 型 TEXT, TINYTEXT 
二 进 制 型 BINARY, VARBINARY 
日 期 时 间 类 型 DATE, TIME, DATETIME, TIMESTAMP, YEAR 
6.2 SOL 基础 
w 


关系 型 数据 库 的 标准 语言 是 SQL (Structured Query Language. 44 #4 fE & ifj i FA). 
SQL 是 关系 数据 库 操作 的 基础 语言 ,将 数据 查询 ,数据 操纵 数据 定义 、 事 务 控 制 、 系 统 控制 
等 功能 集 于 一 体 ,使 得 数据 库 应 用 开发 人 员 数据 库 管理 员 等 都 可 以 通过 SQL 实现 对 数据 
库 的 访问 和 操作 。 

SQL 之 所 以 成 为 关系 数据 库 的 标准 语言 ,并 得 到 广泛 的 应 用 ,其 原因 在 于 SQL 语句 具 
有 以 下 特点 。 

(1) 功能 一 体 化 。 几 乎 涵盖 了 对 数据 库 的 所 有 操作 ,语言 风格 统一 。 

(2) 高 度 的 非 过程 化 。 在 使 用 SQL 操作 数据 库 时 ,用 户 只 需要 说 明 “ 做 什么 ”, 而 不 需 
要 说 明 “ 怎 么 做 ”"。 用 户 任 务 的 实现 对 用 户 而 言 是 透明 的 ,由 系统 自动 完成 。 这 大 大 减轻 了 
用 户 的 负担 ,同时 降低 了 对 用 户 的 技术 要 求 。 

(3) 面向 集合 的 操作 方式 。SQL 采用 集合 操作 方式 ,不 仅 查询 结果 可 以 是 多 条 记录 的 
集合 ,而 且 一 次 插入 、 删 除 、 修 改 操作 的 对 象 也 可 以 是 多 条 记录 的 集合 。 面 向 集合 的 操作 方 
式 提高 了 对 数据 库 的 操作 效率 。 

OD 多 种 使 用 方式 。SQL 既是 自 含 式 语 言 , 又 是 嵌入 式 语 言 。 作 为 自 含 式 语言 , 它 能 够 
独立 地 用 于 联机 交互 的 使 用 方式 ,用 户 可 以 在 终端 键盘 上 直接 输入 SQL 命令 对 数据 库 进行 
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操作 ; 作为 嵌入 式 语言 ,SQL 语句 能 够 艇 入 到 高 级 语言 (例如 C. Ce Java 等 ) 程 序 中 , 供 程 
序 员 设 计 程 序 时 使 用 。 

(5) 简洁 、 易 学 。SQL 命令 数量 有 限 ,语法 简单 ,接近 于 自然 语言 (英语 ) ,因此 容易 学 习 
和 掌握 。 

根据 实现 功能 的 不 同 ,SQL 可 以 分 为 以 下 4 类 。 

CD 数据 定义 语言 :用 于 定义 \ 修 改 、 删 除数 据 库 对 象 ,包括 CREATE、ALTER、DROP。 

(2) 数据 操作 语言 :用 于 改变 数据 库 中 的 数据 ,包括 数据 插入 (INSERT)、 数 据 修改 
(UPDATE) 和 数据 删除 (DELETE) 。 

(3) 数据 查询 语言 :用 于 数据 检索 ,包括 SELECT. 

(4) 数据 控制 语言 : 用 于 对 数据 库 对 象 进 行 访问 权限 的 控制 ,包括 GRANT、 
REVOKE, AUDIT 和 NOAUDIT 等 。 


8.2.1 数据 定义 语句 和 数据 操作 语句 
1. 命令 行 方式 创建 数据 库 和 表 











1) MySQL 数据 库 相 关 操 作 

(1) 创建 数据 库 。 在 MySQL 中 创建 数据 库 通过 SQL 语句 CREATE DATABASE 来 
实现 。 语 法 格式 : 

CREATE Database database name; 

【 例 8.1】 创建 一 个 名 为 xscj 的 数据 库 。 语 句 为 : 

mysql > create database xscj; 

运行 效果 : 执行 上 面 的 SQL 语句 ,其 结果 如 图 8.4 所 示 。 


SQL 5.5 Command Line Client 


im. create dat 
Query OK, 1 row a: 


inysal> m 








图 8.4 创建 数据 库 


注意 : 在 MySQL 中 ,每 一 条 SQL 语句 都 以 “; "作为 结束 标志 。 该 标点 符号 为 英文 标 
点 符号 。 

(2) 查看 数据 库 。 在 MySQL 中 查看 已 经 存在 的 数据 库 通过 SQL 语句 SHOW 
DATABASES 来 实现 。 语 法 格式 : 

SHOW DATABASES; 

执行 上 面 的 语句 ,会 显示 MySQL 软件 中 所 有 的 数据 库 ,包括 存 在 的 用 户 数据 库 和 4 个 
系统 数据 库 , 且 以 列表 形式 显示 ,其 结果 如 图 8. 5 所 示 。 

(3) 选择 数据 库 。 数 据 库 是 数据 库 对 象 的 容器 ,而 在 数据 库 管理 系统 中 一 般 会 存在 多 个 
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数据 库 , 在 操作 数据 库 对 象 之 前 ,首先 要 确定 是 哪 一 个 数据 库 。 即 在 对 数据 库 对 象 进行 操作 
时 ,需要 选择 一 个 数据 库 。 在 MySQL 中 选择 数据 库 通过 SQL 语句 USE 来 实现 。 语 法 格式 : 





USE database name; 
[508.2] 执行 SQL 语句 USE. 3E E44 79 xscj 的 数据 库 
mysql» USE xscj; 


执行 上 面 的 语句 ,其 结果 如 图 8.6 所 示 。 














图 8.5 显示 所 有 数据 库 图 8.6 选择 数据 库 

(4) 删除 数据 库 。 已 经 创建 的 数据 库 需 要 删除 ,在 MySQL 中 使 用 DROP DATABASE 
来 实现 。 语 法 格式 : 

DROP DATABASE database name; 


[818.3] 执行 SQL 语句 删除 数据 库 ,首先 创建 一 个 名 为 xscjl 的 数据 库 
该 数据 库 。 有 具体 步骤 如 下 


然后 再 删除 








mysql > create database xscjl; 
mysql > show databases; 

mysql > drop database xscjl; 
mysql > show databases; 


运行 效果 如 图 8. 7 和 图 8. 8 所 示 


> create databa: ji; 
OK, 1 rov affe! «8.82 sec? 


Inysql> drop database xscji; 
Query OK, 8 rows affected 0.13 sec) 








ow datab: 





图 8.7 创建 数据 库 图 8.8 删除 数据 库 
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注意 : 这 个 命令 必须 小 心 使 用 ,因为 它 将 删除 指定 的 整个 数据 库 , 该 数据 库 的 所 有 表 
(包括 其 中 的 数据 ) 也 将 永久 删除 。 

2) MySQL 数据 表 的 操作 

表 的 操作 包括 创建 表 、 查 看 表 、 删 除 表 和 修改 表 。 本 节 详 细 介 绍 表 的 操作 。 

(OD 创建 表 。 在 MySQL 数据 库 管理 系统 中 创建 表 使 用 SQL 语句 CREATE TABLE, 
基本 格式 如 下 : 

CREATE TABLE table name 

( 


< 列 名 1» < 数据 类 型 > [< 列 选项 >]， 
< 列 名 2> < 数据 类 型 > [< 列 选项 >], 


< 表 选 项 > 
) 
上 述 语句 中 ,table_name 表示 要 创建 的 表 名 字 , 表 的 具体 内 
之 间 用 逗号 分 隔 。“ 列 名 ”指定 表 中 字段 的 名 称 ,“ 数 据 类 型 "指定 
【 例 8.4】 在 xscj 数据 库 中 创建 名 为 xs 的 表 。 


义 在 圆 括 号 之 中 ,各 列 
字段 的 数据 类 型 。 






mysql > CREATE TABLE xs( 
sno varchar(6) NOT NULL, 
sname varchar(10) NOT NULL, 
sex tinyint NOT NULL, 
bir date, 
dno varchar(6)); 


运行 效果 如 图 8.9 所 示 。 





Inysql> use xscj; 
Database changed 
Inysql> CREATE TABLE xs< 
> — sno varchar<6> NOT NULL, 
-> sname varchar<10) NOT NULL, 
-> sex tinyint NOT NULL, 
> bir da 
-> dno varchar<6)); 
Query OK, 8 rows affected 48.11 sec? 


Inysql> m 





图 8.9 创建 xs # 


注意 : 创建 表 之 前 ,需要 选择 数据 库 , 如 果 没 有 选择 数据 库 ,创建 表 时 会 出 现 “No 
database selected” 错 误 。 

(2) 查看 表 结 构 。 当 创建 完 表 后 ,经 常 要 查看 表 信 息 , 如 查看 一 下 表 的 定义 ,通过 执行 
SQL 语句 DESCRIBE 来 实现 。 语 法 格式 : 

DESCRIBE table name; 

[808.5] 查看 数据 库 xscj 中 xs 表 的 结构 信息 。 

FUR AE OR 
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mysql > use xscj; 
mysql > describe xs; 


执行 上 面 的 SQL 语句 ,运行 效果 如 图 8. 10 所 示 。 





Inysql> [use xseJs 


Database changed 


Type 2 Default 


!ovarchar(6) | ! NULL 

NI ES i NULL 
tinyint(4) | i NULL 

i date 1 1 
varcharC6) 





图 8. 10 查看 表 定 义 信息 


G) 修改 表 。 在 MySQL 语句 中 通过 ALTER TABLE 更 改 原 有 的 表 结 构 。 例 如 ,可 以 
增加 或 删 减 列 ,创建 或 取消 索引 ,更 改 原 有 列 的 类 型 ,重新 命名 列 或 表 , 还 可 以 更 改 表 的 描述 
和 表 的 类 型 。 

ALTER TABLE 语句 的 基本 格式 如 下 : 








ALTER TABLE table name 

ADD (< 列 名 > < 数据 类 型 > < 列 选项 >) / x 添加 列 * / 

ALTER (< 列 名 > (SET DEFAULT default value | DROP DEFAULT}) / * 修改 默认 值 * / 
CHANGE (< 旧 列 名 > < 新 列 名 > < 数据 类 型 > < 列 选项 >) / * 对 列 重 命名 * / 





MODIFY (< 列 名 > < 数据 类 型 > < 列 选项 >) / * 修改 列 类 型 * / 
DROP < 列 名 >) / * 删除 列 x* / 
RENAME < 新 表 名 > /* 重 命名 该 表 */ 
其 他 


【 例 8. 6】 为 xs 表 添 加 总 学 分 和 备注 两 列 ,语句 为 : 
ALTER TABLE xs ADD (zxf int default 0 ,bz text NULL); 


执行 效果 如 图 8. 11 所 示 。 查 看 表 结构 ,新 增加 的 属性 列 已 出 现在 表 中 ,如 图 8. 12 
所 示 。 













Inysql> ALTER TABLE xs ADD <zxf int default Ø -bz text NULL); 
Query OK, B rows affected <Ø 
Records: @ Duplicates: 






ð Warni 





图 8. 11 xs 表 增 加 属性 列 


更 改 表 结 构 ,将 xs 表 中 sex 字段 的 字段 类 型 改 为 CHAR(2) 。 
ALTER TABLE xs CHANGE sex sex CHAR(2); 


(4) 删除 表 。 在 MySQL 数据 库 管 理 系统 中 删除 表 通 过 SQL if] DROP TABLE 来 实 
现 。 语 法 格式 : 
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Default 


varchar(6> 
varchar(i@> 1 
tinyint(4) 
date 


varchar(6> 
int (14> 
text 





图 8.12 查看 表 定 义 
DROP TABLE table name 
[908.7] 删除 xscj 数据 库 中 的 xs 表 , 具 体 步 又 如 下 。 


mysql > use xscj; // 选 择 xscj 数据 库 
mysql > DROP TABLE xs; 


执行 效果 如 图 8. 13 所 示 





ted (8.03 sec) 





图 8.13 删除 表 


为 了 检验 数据 库 xscj 中 xs 表 是 否 还 存在 ,执行 describe xs 语句 ,运行 效果 如 图 8. 14 


所 示 。 执 行 结果 显示 ,xs 表 已 经 不 存在 ,表示 删除 xs 表 成 功 


n 





mysql> d 
ERROR 1146 ¢42S@2 


Inysql> 








图 8.14 查看 表 


2. 命令 行 方式 进行 数据 操作 
CD 插入 记录 。 通 过 INSERT 语句 可 以 向 表 中 插入 一 行 或 多 行 数据 。 
基本 格式 如 下 : 


INSERT [INTO] table name |view name[(column namel[,column name2.--])] 
VALUES (valuel[,values, -… ]); 


[5018.8] 向 xscj 数据 库 的 表 xs( 表 中 列 包括 学 号 、 姓 名 、 性 别 、 出 生日 期 \ 所 在 系 编号 ) 





hb 插入 如 下 一 行 : 130601, 赵 林 林 ,1,1995-02-10,070001。 具 体 的 SQL 语句 如 下 。 
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INSERT INTO XS VALUES( '130601', ' 赵 林 林 ', 1,CAST('1995 - 02 - 10' as date), '070001'); 

说 明 : CAST(exp as type) 为 类 型 转换 函数 ,参数 exp 是 表达 式 , 参 数 type 是 要 转换 的 
类 型 。 本 实例 使 用 该 函数 将 字符 串 '1995-02-10' 转 换 成 日 期 类 型 。 

运行 效果 如 图 8. 15 Bron 。 


^. MySQL 5.5 Command Line Client 


mysql> INSERT INTO 
VALUES <’ 130681’ . 赵 林 机 CAST<’ 1995-82-19” as date),’ 0790881’ >; 


Query OK, 1 rou affected (8.8. > 


Inysql> 











图 8.15 命令 行 插入 数据 记录 
为 了 校 验 插入 是 否 成 功 ,可 以 通过 SQL 语句 SELECT 来 实现 。 具 体 SQL 语句 如 下 : 
mysql» SELECT * FROM xs; 
执行 上 面 的 SQL 语句 ,其 结果 如 图 8. 16 所 示 。 


+. MySQL 5.5 Command Line Client [- [oj 


1 1995-82-18 | 670001 











图 8.16 查看 表 数 据 记 录 


(2) 修改 记录 。 向 表 中 插入 数据 后 ,如 要 修改 表 中 的 数据 ,可 以 使 用 UPDATE 语句 , 基 
本 格式 如 下 : 
UPDATE table_name 


SET column namel- expri [, column name2 = expr2 …] 
[WHERE condition] 


[918.9] 将 xscj 数据 库 xs 表 中 学 号 为 “130601” 学 生 的 姓名 改 为 “ 赵 林 ”。 具 体 的 
SQL 语句 如 下 : 





UPDATE xs SET 姓名 = ' 赵 林 'WHERE 学 号 = '130601'; 
为 了 校 验 修改 是 否 成 功 ,可 以 通过 SQL 语句 SELECT 来 实现 。 具 体 SQL 语句 如 下 : 
SELECT * FROM xs; 


执行 上 面 的 SQL 语句 ,其 结果 如 图 8. 17 所 示 。 
(3) 删除 记录 。 删 除 表 中 数据 一 般 使 用 DELETE 语句 ,语法 格式 如 下 : 





DELETE FROM table name [WHERE condition] 
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图 8. 17 查看 表 数 据 记录 


【 例 8.10】 要 删除 李 芳 的 信息 可 使 用 如 下 语句 : 

DELETE FROM XSWHERE sname = 'ZE$'; 

为 了 校 验 删除 是 否 成 功 ,可 以 通过 SQL 语句 SELECT 来 实现 。 具 体 的 SQL 语句 
如 下 : 


mysql > INSERT INTO xs VALUES( 130602", ' 李 芳 ', 1, CAST( '1994 — 10 — 3' as date), '070001'); 
mysql» SELECT * FROM xs; 






执行 上 面 的 SQL 语句 ,其 结果 如 图 8. 18 所 示 


mysql > DELETE FROM xs WHERE sname = ' 李 芳 '; 


130601 : 赵 林 1995-92-19 | 870001 
130602 E 1994-10-83 ! 870082 








图 8.18 删除 操作 前 的 数据 记录 


运行 效果 如 图 8. 19 所 示 。 


^. NySQL 5.5 Command Line Client 


ql> DELETE FROM 
Query OK, 1 row affected (8.02 





lect * from 


138601 


H row in set (8.08 sec) 








图 8. 19 ”执行 删除 操作 
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3. MySOL 界面 工具 创建 数据 库 和 表 


通过 MySQL 数据 库 服 务 器 自 带 的 MySQL Command Line Client 来 创建 数据 库 , 需 要 
掌握 SQL 语句 。 在 具体 实践 中 ,用 户 可 以 通过 客户 端 软件 SQLyog 来 创建 数据 库 。 

【 例 8.11】 创建 一 个 名 为 xsci 的 数据 库 。 

CD 首先 连接 数据 库 服 务 器 ,在 “对 象 资源 管理 器 ”窗口 中 显示 MySQL 数据 库 管理 系 
统 中 的 所 有 数据 库 , 如 图 8. 20 所 示 。 








“15 Deh ee 











| 自动 充 成 : [Tab]-> 下 一 个 标签 [Ctrl+Space]-> 列 出 所 有 标签 ，[… 
Bp roctülocalhost E | 
@ E information schema 
d E nysal 
田 E performance schema 


aE test [HI A 3 信息 





图 8.20 连接 MySQL 数据 库 管理 系统 


COD 右 击 “对 象 资源 管理 器 ”窗口 空白 处 ,在 出 现 的 菜单 中 选择 “新 建 数 据 库 ” 命 令 , 如 
图 8. 21 所 示 , 则 会 打开 “创建 数据 库 ” 对 话 框 。 


回回 
-x 


Shwe ye 

















Fs 


Ctrl+D 
CtrliShi ftt 





Ctrltale+s 


CtrltAltt0 
CtrliShifttQ 








图 8.21 创建 数据 库 命令 
(3) 在 出 现 的 “创建 数据 库 ” 对 话 框 中 ,设置 数据 库 名 称 为 xscj, 然 后 单 击 “ 创 建 " 按 钮 则 
会 创建 数据 库 , 如 图 8. 22 所 示 。 


(4) 当 数据 库 xscj 创建 成 功 后 ,“ 对 象 资源 管理 器 ”中 就 会 显示 出 名 为 xscj 的 数据 库 , 如 
图 8. 23 所 示 。 
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图 8.23 数据 库 创建 成 功 


4. MySQL 界面 工具 表 操 作 


1) 创建 表 

【 例 8.12】 在 xscj 数据 库 中 创建 xs 表 , 步 又 如 下 。 

CD 在 “对 象 资源 管理 器 ”窗口 中 , 右 击 xscj 数据 库 , 然 后 选择 “ 创 / 建 ”1“ 表 ”命令 ,如 
图 8. 24 所 示 , 则 会 打开 “新 表 ” 窗 口 。 

(2) 在 打开 的 “新 表 ” 窗 口中 ,设置 相应 信息 ,具体 内 容 如 图 8.25 所 示 。 其 中 ,“ 表 名 称 ” 
文本 框 中 输入 表 的 名 称 ,“ 列 ”选项 卡 中 的 “ 列 名 ”设置 字段 名 ,“ 数 据 类 型 " 列 设置 字段 的 类 
型 ,“ 长 度 ” 列 设置 列 类 型 的 宽度 。 

(3) 最 后 在 “新 表 ” 窗 口中 单 击 “ 保 存 ” 按 钮 ,实现 xs 表 的 创建 。 在 “对 象 资源 管理 器 ” 窗 
口中 选择 xscj 数据 库 , 单 击 “ 刷 新 ”按钮 , 则 会 在 “ 表 ” 结 点 中 显示 表 xs, 如 图 8. 26 所 示 。 
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图 8.24 新 建 表 
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图 8.25 创建 表 的 详细 信息 


除了 通过 上 述 步 又 (向 导 方式 ) 创 建 表 外 ,还 可 以 在 "询问 ”ava | 
窗口 中 输入 创建 表 的 SQL 语句 ,然后 单 击 工具 栏 中 的 “执行 查 [sues 0 
询 * 按 钮 项 也 可 实现 表 的 创建 ,如 图 8. 27 所 示 。 d i; 

2) 删除 表 

如 果 要 在 数据 库 中 删除 表 , 步 骤 如 下 。 

CD 在 “对 象 资源 管理 器 "窗口 中 , 单 击 数据 库 xscj 中 表 结 
点 前 的 加 号 ,然后 右 击 xs 结 点 ,从 弹出 的 快捷 菜单 中 选择 “更 多 
表 操 作 ”|“ 从 数据 库 删除 表 ” 命 令 ,如 图 8. 28 所 示 。 

(2) 当 单 击 “ 从 数据 库 删除 表 ” 命 令 时 ,会 弹出 对 话 框 确认 “图 8.26 创建 表 成 功 
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pu [Tab]- > 下 一 个 标签 ， [Ctrl+Space]- > 列 出 所 有 标签 [CtriEnter]-» 列 出 匹配 标签 
CREATE TABLE xs( a 
sno VARCHAR(6) NOT NULL, 
sname VARCHAR(10) NOT NULL, 
sex TINYINT NOT NULL, 

bir DATE, 

dno VARCHAR(6)); 




















图 8.27 输入 SQL 语句 创建 表 
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ped a 数据 搜索 Ctrl+Shi £D. 


e| Hm Fil 
“在 新 选项 卡 中 打开 表格 CtrltF11 
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LI CEJ 
aau  JJETS Shift+Del 
i S3 | RR GERBER Del 
| 会 重新 排序 列 Ctrl+ALtHR 










| Anei 





of 
图 8.28 删除 表 命 令 


是 否 删 除 表 , 单 击 “ 是 ”按钮 后 ,这 时 “对 象 资源 管理 器 ”窗口 数据 库 xscj 中 “ 表 ” 结 点 里 就 没 
有 任何 表 对 象 。 


如 果 要 修改 表 , 例 如 增加 表 中 字段 ,可 以 在 步骤 (1) 中 选择 “改变 表 ” 选 项 ,在 弹出 的 窗口 


ph 进 行 修改 ,修改 后 单 击 “ 保 存 ” 按 钮 即 可 完成 。 


3) 表 中 记录 操作 
添加 记录 的 方法 如 下 。 
CD 首先 连接 MySQL 软件 ,在 对 象 资源 管理 器 窗口 中 选择 xscj 数据 库 , 然 后 单 击 表 结 


点 ,这 时 会 显示 数据 库 中 的 表格 。 


(2) 在 对 象 资源 管理 器 窗口 中 , 右 击 xs 表 , 然 后 选择 “打开 表 ” 命 令 , 如 图 8. 29 所 示 , 则 
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会 打开 * 表 数据 ”窗口 。 
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Big root@localhost 
S É information sch. 




















图 8. 29 “ 表 数 据 ” 窗 口 


(3) 在 打开 的 “ 表 数 据 ” 窗 口中 ,可 以 直接 输入 数值 ,然后 单 击 * 保 存 ” 按 钮 ,就 可 以 实现 
数据 记录 值 的 录入 ,如 图 8. 30 所 示 。 
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图 8.30 插入 数据 记录 


(4) 为 了 校 验 是 否 插入 成 功 ,可 以 单 击 表 数据 窗口 中 的 “刷新 ”按钮 ,如 果 数 据 记 录 捅 人 
成 功 , 则 会 在 “ 表 数 据 ? 窗 口中 显示 出 数据 记录 。 
修改 记录 的 方法 和 添加 数据 基本 相同 。 在 打开 的 “ 表 数 据 ?窗口 


中 ,会 显示 该 表 所 包含 
的 所 有 数据 记录 ,如 图 8. 31 所 示 ,双击 需要 修改 的 地 方 . 输 入 新 记录 ,修改 完 后 单 击 “ 保 存 ” 
按钮 图 即 可 。 
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uS T 2 22E D 
ER o5 ga BEE Y © Umea 第 - 行 : | 


|sname |sex [bir [ano 











张 三 1 1995-09-06 000007 
Eb 0 1996-08-08 000006 
FL (MULL) (NULL) (NULL) (NULL) (NULL) 





图 8.31 处 于 编辑 状态 


删除 记录 的 方法 是 : 在 打开 的 “ 表 数据 ?窗口 中 ,会 显示 该 表 所 包含 的 所 有 数据 记录 , 然 
后 找到 所 要 删除 的 数据 记录 ,找到 后 单 击 关于 该 数据 记录 的 复 选 框 , 使 该 数据 记录 处 于 被 选 
中 状态 ,如 图 8. 32 所 示 。 单 击 * 删 除 ” 按 钮 面 | 即 可 。 这 时 会 出 现 删除 确认 对 话 框 , 单 击 
“是 ”按钮 即 实现 选中 数据 记录 的 删除 。 删 除 后 的 结果 如 图 8. 33 所 示 。 
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图 8.32 删除 “选中 ”记录 
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sno 
000001 
000003 


bir 
1 1995-09-06 
1 1995-03-02 000006 


(NULL) 











图 8. 33 删除 记录 成 功 
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8.2.2 查询 语句 


对 数据 的 基本 操作 包括 数据 插入 .数据 更 新 数据 删除 数据 查询 操作 ,前 面 介绍 了 插入 
数据 记录 操作 、 更 新 数据 记录 操作 和 删除 记录 操作 ,本 节 主 要 介绍 查询 数据 记录 操作 。 

查询 数据 记录 ,就 是 指 从 数据 库 对 象 表 中 获取 所 要 求 的 数据 记录 ,该 操作 是 应 用 频率 最 
高 .最 重要 的 操作 。 在 MySQL 数据 库 中 ,利用 SELECT 语句 可 以 完成 不 同类 型 的 复杂 查 
询 任务 。SELECT 语句 的 语法 格式 如 下 : 





SELECT [ALL | DISTINCT ] column_name[ ,expression…] 
[FROM tablel name [ , table2 name,view name,] …]  /*FROM-f4*/ 


[WHERE condition] / * WHERE FAJ * / 
[ORDER BY (col name | expr )[ASC | DESC], --] / * ORDER BY 子 句 * 
[GROUP BY (col name | expr ) [ASC | DESC], —] / * GROUP BY 子 句 x 
[HAVING group_condition] / * HAVING 子 句 * H 
当 执行 一 条 SELECT 语句 时 ,系统 会 根据 WHERE 子 句 的 条 件 表达 式 condition, 从 





FROM 子 句 指定 的 基本 表 或 视图 中 找 出 满足 指定 条 件 的 记录 ,再 按 SELECT 子 句 中 的 目标 列 
或 目标 表达 式 , 从 数据 库 中 选 出 匹配 的 行 和 列 , 并 将 结果 存放 到 临时 的 表 中 。 如 果 有 GROUP 
子 句 , 则 将 结果 按 tT, All 4 GROUP BY 子 句 带 有 HAVING 子 句 , 则 只 有 满足 指 
定 条 件 group. condition 的 组 才 会 返回 ; 如 果 有 ORDER BY 子 句 , 则 对 返回 的 结果 进行 排序 。 

为 了 便于 讲解 ,本 节 所 涉及 的 查询 数据 记录 操作 ,都 是 针对 xscj 数据 库 中 表示 学 生 基 
本 信息 的 表 xs ,课程 基本 信息 表 ke, 学生 选课 信息 表 sc, 系 基本 信息 表 dept, 表 的 结构 分 别 
如 图 8. 34 一 图 8. 37 Bron. 














130601 ! 赵 林 林 970901 
! 130602 | $F : 970002 ! 


1 1306803 070991 | 
1 130604 i 970001 | 
130685 E 1994-11-81 | 870901 





图 8.34 xs 表 数 据 





6 rows in set (8.89 sec) 





mysql> 


图 8.35 kc 表 数据 
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EFT 
1 130685 








图 8.36 ”sc 表 数 据 





870081 
970082 
1 070003 





图 8.37 dept 表 数 据 
在 MySQL 中 进行 查询 数据 记录 操作 ,具体 步骤 如 下 
(D 执行 SQL 语句 USE ,选择 数据 库 xscj, 具 体 SQL 语句 如 下 : 
USE xscj; 
(2) 执行 SQL 语句 SELECT, 查询 所 有 字段 数据 ,具体 SQL 语句 如 


SELECT sno, sname, sex, bir, dno FROM xs; 





执行 上 面 的 SQL 语句 ,其 结果 如 图 8. 38 所 示 。 


Inysql> use xscj; 
Database changed 
1> SELECT sno, 





1995-82-18 





图 8. 38 查询 表 数 据 
以 下 介绍 各 种 查询 语句 的 语法 
1. 基本 查询 


基本 查询 主要 指 对 单个 表 或 视图 进行 无 条 件 查询 ,有 条 件 查询 等 。 
D 无 条 件 查询 
在 SELECT 语句 中 ,SELECT 子 句 后 的 目标 列 可 以 是 表 中 的 所 有 列 


、 部 分 列 , 也 可 以 是 
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表达 式 ,包括 算 术 表 达 式 ,字符 串 常量 、 函 数 等 。 
Cb 查询 所 有 的 列 。 如 果 查 询 表 或 视图 中 所 有 列 的 数据 ,可 以 用 ”* ”表示 目标 列 。 
【 例 8.13] 查询 xs 表 中 全 体 学 生 的 基本 信息 。 








SELECT * FROM xs; 

(2) 查询 指定 列 。 如 果 查 询 特定 列 的 数据 ,可 以 在 目标 列 中 列 出 相应 的 列 名 ,各 列 名 之 
间 要 以 逗号 分 隔 。 

【 例 8.14】 查询 xscj 数据 库 的 ke 表 中 所 有 课程 的 课程 编号 .课程 名 。 

SELECT cno,cname FROM kc; 

(3) 改变 列 标题 。 可 以 为 查询 的 目标 列 或 目标 表达 式 起 别名 , 即 改变 列 标题 。 

【 例 8.15】 查询 xs 表 中 学 生 的 学 号 、 姓 名 ,结果 中 各 列 的 标题 分 别 指定 为 学 号 和 姓名 。 

SELECT sno 学 号 ,sname 姓名 FROM xs; 

CD 使 用 字符 串 常量 。 如 果 需 要 在 查询 结果 中 加 入 字符 ,可 以 在 目标 列表 达 式 中 使 用 
字符 申 常量 。 

【 例 8.16】 查询 xscj 数据 库 的 xs 表 中 的 学 号 姓名。 结果 集 输出 格式 为 : 

sno'Name is: ' sname 

其 中 ,sno 为 查询 结果 集中 第 1 列 列 名 称 , Name is: 为 查询 结果 集 第 2 列 列 名 称 ， 
sname 为 查询 结果 集 第 3 列 列 名 称 。 

SELECT sno, 'Name is: ',sname FROM xs; 

(5) 使 用 函数 。 可 以 在 目标 列表 达 式 中 采用 函数 对 查询 结果 进行 运算 。 

【 例 8.17】 查询 xscj 数据 库 的 xs 表 中 全 体 学 生 的 学 号 、 姓 名 、 出 生年 份 。 





SELECT sno, sname, YEAR(bir) FROM xs; 

其 中 ,YEAR(date) 返 回 date 的 年 份 (范围 为 1000 一 9999) 。 

(6) 使 用 表达 式 。 可 以 在 目标 列表 达 式 中 采用 表达 式 对 查询 结果 进行 运算 。 
[918.18] 查询 xscj 数据 库 的 xs 表 中 全 体 学 生 的 学 号 、. 姓 名、 年龄 。 


SELECT sno, sname,2014-YEAR(bir) FROM xs; 


查询 结果 如 图 8. 39 所 示 。 





Inysql> SELEC me,28014-YERR(bir) FROM xs; 





130681 
! 130682 
1 130683 
1 130604 
138605 





图 8. 39 使 用 表达 式 查询 
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(7) 清除 重复 行 。 如 果 不 希 望 在 查询 结果 中 出 现 重 复 记 录 了 ,可 以 使 用 DISTINCT 





【 例 8.19】 在 sc 表 中 查询 学 生 选 课 学 生 的 学 生 编号 ,结果 集中 不 出 现 重复 学 生 编 号 。 
SELECT DISTINCT sno FROM sc; 
2) 有 条 件 查询 
在 执行 无 条 件 查询 时 ,由 于 没有 指定 限制 条 件 , 所 以 会 检索 表 或 视图 中 的 所 有 记录 。 在 
实际 操作 中 ,对 数据 的 检索 通常 是 有 限制 的 , 即 有 条 件 查询 。 有 条 件 查询 指 在 SELECT iff 
句 中 使 用 WHERE 子 句 设置 查 询 条 件 , 只 有 满足 查询 条 件 的 记录 才 会 返回 。 在 WHERE 
子 句 中 常用 的 运算 符 如 表 8. 2 所 示 。 

表 8.2 WHERE 子 句 中 常用 的 运算 符 











查询 条 件 运 算 符 

比较 运算 =,>,<,>=,<=,<>,!= 

确定 范围 BETWEEN AND, NOT BETWEEN AND 
确定 集合 IN, NOT IN 

字符 匹配 LIKE, NOT LIKE 

空 值 判 断 IS NULL,IS NOT NULL 

逻辑 操作 NOT.AND.OR 


(D 比较 运算 。 比 较 运 算 符 用 于 比较 两 个 表达 式 的 值 ,MySQL 支持 的 比较 运算 符 有 二 
(等 于 ) ,过 (小 于 ) ,二 =( 小 于 等 于 ) .二 (大 于 ) > 一 (大 于 等 于 )、 二 > REF) I= (不 等 
于 )。 比 较 运算 的 语法 格式 为 : expression { [<1<=|1>1>=|<=> |<>| 
!= } expression, 

P4 BA A GA SN ELI AS A E (EL NULL) IE, He Be Z8 A 3R [00 32 4 (EE TRUE CE a FALSE 
CBD 。 

[58.20] 查询 系 编号 为 “070001? 的 学 生 的 所 有 信息 。 


SELECT * FROM xs WHERE dno = '070001'; 
[518.21] 查询 考试 成 绩 有 不 及 格 的 学 生 的 学 号 。 
SELECT sno FROM sc WHERE grade< 60; 


(2) 确定 范围 。 当 要 查询 的 条 件 是 某 个 值 的 范围 时 ,可 以 使 用 BETWEEN 关键 字 。 
BETWEEN 关键 字 指 出 查询 范围 。 格 式 为 : 








expression [ NOT ] BETWEEN expressionl AND expression2 


当 不 使 用 NOT 时 , 若 表 达 式 expression 的 值 在 表达 式 expression! 49 expression2 之 
间 ( 包 括 这 两 个 值 ), 则 返回 TRUE ,否则 返回 FALSE; 使 用 NOT 时 ,返回 值 刚 好 相反 。 
【 例 8.22】 查询 xscj 数据 库 xs 表 中 不 在 1995 年 出 生 的 学 生 情 况 。 


SELECT * FROM xsWHERE bir NOT BETWEEN '1995 — 1— 1' and '1995 - 12 - 31'; 


(3) 确定 集合 。 使 用 IN 关键 字 可 以 指定 一 个 值 表 , 值 表 中 列 出 所 有 可 能 的 值 , 当 与 值 表 
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中 的 任 一 个 匹配 时 , 即 返回 TRUE, 和 否则 返回 FALSE, (EH IN 关键 字 指定 值 表 的 格式 为 : 
expression IN ( expression [,…n]) 


[518.23] 查询 所 在 系 为 “'070001( 计 算 机 科学 与 技术 系 )”“070002( 网 络 工程 系 )” 或 
“070003( 信 息 技 术 系 )” 的 学 生 的 情况 。 


SELECT * FROM xs WHERE dno IN ('070001', '070002', '070003'); 


xs 信息 表 中 只 有 系 编号 ,本 例 按 所 在 系 编号 查询 。 如 果 按 系 名 查询 , 则 要 使 用 后 面 所 
介绍 的 多 表 查 询 。 

(4) 字符 匹配 。 如 果 要 进行 模糊 查询 ,可 以 在 WHERE 条 件 中 使 用 LIKE 或 NOT 
LIKE 运算 符 。 为 了 实现 模糊 查询 , 常 使 用 特殊 符号 “"_” 和 “%”, 其 中 “%” 代 表 0 个 或 多 个 
字符 。“_” 代 表单 个 字符 。LIKE 运算 符 表达 式 的 格式 为 : 

match expression [ NOT ] LIKE match expression 

[908.24] 查询 xscj 数据 库 xs 表 中 姓 “ 王 ”的 学 生 学 号 、 姓 名 及 性 别 。 

SELECT sno, sname, sex FROM XS WHERE sname LIKE ' E % '; 

[808.25] 查询 xscj 数据 库 xs 表 中 姓 “ 王 ” 且 全 名 为 两 个 汉字 的 学 生 学 号 ,姓名 ， 
性 别 。 

SELECT sno, sname, sex FROM XS WHERE sname LIKE ' E. '; 

(5) 空 值 判 断 。 当 需要 判定 一 个 表达 式 的 值 是 否 为 空 值 时 ,使 用 IS NULL 关键 字 , 格 
X. 

expression IS [ NOT ] NULL 

当 不 使 用 NOT 时 , 若 表达 式 expression 的 值 为 空 值 ,返回 TRUE, 和 否则 返回 FALSE。 
当 使 用 NOT 时 ,结果 刚好 相反 。 

【 例 8.26】 某 些 学 生 选 修 课程 后 没有 参加 考试 ,所 以 有 选课 记录 ,但 没有 考试 成 绩 。 
查询 xscj 数据 库 sc 表 中 缺少 成 绩 的 学 生 的 学 号 和 相应 的 课程 号 。 

SELECT sno, cno FROM SC WHERE grade IS NULL; 

(6) EHRE., WHERE 子 句 的 查询 条 件 还 可 以 将 多 个 判定 运算 的 结果 通过 逻辑 运算 
符 (AND、OR 和 NOT) 再 组 成 更 为 复杂 的 查询 条 件 。AND 用 于 组 合 两 个 条 件 ,两 个 条 件 都 
为 TRUE 时 值 才 为 TRUE, OR 也 用 于 组 合 两 个 条 件 ,两 个 条 件 有 一 个 条 件 为 TRUE 时 值 
就 为 TRUE。NOT 表示 对 判定 的 结果 取 反 。 

[908.27] 查询 xs 表 中 所 在 系 为 070001( 计 算 机 科学 与 技术 系 ) 且 为 女 同学 的 基本 


息 
A. 


= 
zr 


SELECT * FROM xs WHERE dno = '070001'and sex= ' 女 '; 


2. 连接 查询 (多 表 查 询 ) 
在 数据 库 中 ,相关 数据 可 能 存储 在 不 同 的 表 中 ,因此 需要 从 两 个 或 多 个 表 中 获取 数据 。 
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连接 查询 就 是 指 从 多 个 表 或 视图 中 查询 信息 。 把 不 同 表 的 数据 组 合 到 一 个 表 中 叫做 表 的 连 
接 。 连 接 查 询 分 为 内 连接 和 外 连接 。 内 连接 是 指 根据 指定 的 连接 条 件 进行 连接 查询 ,只 有 
人 

(1) 相等 内 连接 。 使 用 等 号 (< 一 ”) 指 定 连接 条 件 的 连接 查询 。 进 行 比较 的 不 同 表 中 列 
的 名 称 可 以 不 同 , 但 类 型 必须 匹配 。 如 果 连 接 的 表 中 有 相同 名 称 的 列 , 则 需要 在 列 名 前 加 表 
名 ,以 区 分 是 哪个 表 中 的 列 。 

[918.28] 查询 计算 机 科学 与 技术 系 的 学 生 学 号 、 姓 名 、 系 编号 、 系 名 称 , 语 句 为 : 


SELECT sno, sname, xs. dno, dname from xs, dept 
WHERE xs. dno = dept. dno and dept. dname = ' 计 算 机 科学 与 技术 系 '; 


实例 效果 如 图 8. 40 所 示 。 








s.dno,dnane 


dno-dept.dno and 


-> dept .dnane =’ 计算 机 科学 与 技术 系 


i 130601 | 7 
i 130603 上 
ELT 








图 8.40 相等 内 连接 查询 


如 果 要 在 不 同 表 中 查询 数据 , 则 必须 在 FROM 子 句 中 指定 多 个 表 。 多 个 表 名 之 间 用 豆 
ROT. 

例如 ,在 xscj 数据 库 中 需要 查找 选修 了 离散 数学 课程 的 学 生 的 姓名 和 成 绩 ,就 需要 将 
xs,kc 和 sc 三 个 表 进 行 连接 ,才能 查找 到 结果 

[918.29] 查找 xscj 数据 库 中 有 学 生 选 修 过 的 课程 名 和 课程 号 ,使 用 如 下 语句 : 

SELECT DISTINC Tkc. cname 课程 名 ，sc. cno 课程 号 

FROM kc，sc 

WHERE kc. cno = sc. cno; 

(2) 自身 连接 。 如 果 是 在 同一 个 表 或 视图 中 进行 的 连接 查询 , 则 称 为 自身 连接 。 相 当 
于 同一 个 表 作 为 两 个 或 多 个 表 使 用 。 

[618.30] 查询 与 姓名 “ 赵 林 林 ” 在 同一 个 系 的 学 生 的 学 号 ,姓名 ,语句 为 








SELECT xs1. sno，xs1. sname 
FROM xs xs1, xs xs2 

WHERE xs1. dno = xs2. dno and xs2. sname = ' 赵 林 林 '; 
其 中 ,xsl,xs2 为 xs 表 的 别名 

实例 效果 如 图 8. 41 所 示 。 
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mysql> SELECT 
-» FROM 








图 8.41 自身 连接 查询 


(3) 外 连接 。 内 连接 只 连接 匹配 的 行 , 外 连接 是 在 内 连接 的 基础 上 ,将 某 个 连接 表 中 不 
符合 连接 条 件 的 记录 加 入 结果 集中 。 即 外 连接 查询 会 返回 所 操作 表 中 至 少 一 个 表 的 所 有 数 
据 记 录 。 

根据 结果 集中 所 包含 不 符合 连接 条 件 的 记录 来 源 的 不 同 , 外 连接 分 为 左 外 连接 
(LEFT) 、 右 外 连接 (RIGHT) 和 全 外 连接 (FULL)。 其 中 , 左 外 连接 是 指 在 内 连接 的 基础 
上 ,经 连接 操作 符 左 侧 表 中 不 符合 连接 条 件 的 记录 加 入 结 1 ,与 之 对 应 的 连接 操作 符 右 
侧 表 列 用 NULL 填充 。 右 外 连接 包含 右边 表 的 全 部 行 (不 管 左边 的 表 中 是 否 存在 与 它们 匹 
配 的 行 ), 以 及 左边 表 中 全 部 匹配 的 行 。 全 外 连接 是 包含 左 、 右 两 个 表 的 全 部 行 ,不管 男 外 一 
边 的 表 中 是 否 存 在 与 它们 匹配 的 行 。 

外 连接 语句 的 格式 如 下 : 






SELECT column namel[,column name2.. ] 

FROM join tablenamel LEFT|RIGHT|FULL [OUTER] JOIN join tablename2 

ON join condition 

接 的 表 join _ 


上 述 语 句 中 , column _ name 表示 所 要 查询 的 列 名 字 , 来 源 于 所 ps 
连接 .参数 join _ 


tablenamel 和 join. tablename2. 关键 字 OUTER JOIN 表示 表 进 行 外 
condition 表示 进行 连接 的 条 件 

[918.31] 查询 学 生 的 选修 情况 , 若 某 个 学 生 没有 选课 ,xs 表 记 录 保 存在 结果 集中 ,而 
在 sc 表 的 属性 上 填空 值 (NULL) ,这 时 就 需要 外 连接 。 具 体 语 句 为 : 


SELECT xs. sno, sname, cno, grade 
FROM xs LEFT JOIN sc 


ON (xs. sno = sc. sno) ; 

运行 效果 如 图 8. 42 所 示 。 

3. 查询 排序 

在 执行 查询 操作 时 ,可 以 使 用 ORDER BY 子 句 对 查询 的 结果 进行 排序 。 可 以 按 升 序 
或 降序 进行 排序 ,可 以 针对 一 列 或 多 列 进行 排序 ,也 可 以 按 表达 式 、 别 名 等 进行 排序 。 

(1) 升序 降序 排序 。 当 使 用 ORDER BY 子 句 对 查询 结果 排序 时 ,可 以 使 用 ASC 或 
DESC 设置 按 升 序 或 降序 排序 ,默认 为 升序 排序 。 例 如 
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1 130681 85 1 
i 138681 EP 2! 38 i 
1 1306902 98 : 


1 130602 i i 78 | 
i 1386803 3 1 i 87 i 
EE T 1 sat 
! 138684 i NULL | 
1 130685 1 i NULL | 
1 13060 i ! NULL | 














图 8.42 左 外 连接 查询 


SELECT sno, sname FROM xs ORDER BY sno; 
SELECT sno, sname FROM xs ORDER BY sno DESC; 


(2) ZU HE 






行 排序 。 对 查询 结果 进行 排序 ,也 可 以 基于 多 列 或 多 个 表达 式 进行 。 
当 按 多 列 或 多 个 进行 排序 时 ,首先 按照 第 一 列 或 表达 式 进行 排序 ; 当 第 一 列 或 表达 
式 的 数据 相同 时 , 按 第 二 列 或 表达 式 进 行 排序 ,以 此 类 推 

【 例 8.32】 查询 学 生 信息 , 按 学 生 所 在 系 编号 降序 、 学 号 升序 排序 ,语句 为 : 











SELECT sno, sname , dno FROM xs ORDER BY dno DESC, sno; 
效果 如 图 8. 43 Bros 。 


no,snane „dno FROM xs ORDER BY dno DESC, sno; 





130602 070002 : 
130661 | ! 070001 : 


130603 070991 : 
130604 070001 | 
130605 978901 








图 8.43 多 列 排序 查询 


《3) 使 用 列 位 置 编号 排序 。 当 执行 排序 操作 时 ,也 可 按照 目标 列 或 表达 式 的 位 置 编号 
排序 。 如 果 列 名 或 表达 式 名 称 很 长 ,那么 使 用 位 置 排序 可 以 缩短 排序 语句 的 长 度 。 
【 例 8. 33】 查询 学 生 学 号 ,姓名 ,年 龄 信息 ,查询 结果 按 学 号 升序 排序 , 按 年 龄 降序 排序 。 








SELECT sno, sname, 2014-YEAR(bir) age FROM xs ORDER BY sno,3 DESC; 


4. 统计 查询 


(1) COUNT 函数 。 最 经 常 使 用 的 聚合 函数 是 COUNT() 函 数 , 用 于 统计 组 中 满足 条 
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件 的 行 数 或 总 行 数 ,返回 SELECT 语句 检索 到 的 行 中 非 NULL 值 的 数目 , 若 找 不 到 匹配 的 
行 , 则 返回 0。 语 法 格式 为 : 


COUNT ( ( [ ALL | DISTINCT ] expression} | * ) 


ALL 表示 对 所 有 值 进 行 运 算 , DISTINCT 表示 除去 重复 值 , 默认 为 ALL。 使 用 
COUNT * ) 时 将 返回 检索 行 的 总 数目 ,不 论 其 是 否 包 含 NULL ff. 
【 例 8.34】 求学 生 的 总 人 数 。 


SELECT COUNT( * ) AS ' 学 生 总 数 'FROM xs; 


(2) MAX 和 MIN 函数 。MAX( ) 和 MING ) 函 数 分 别 用 于 求 表 达 式 中 所 有 值 项 的 最 
大 值 与 最 小 值 , 语 法 格式 为 : 


MAX / MIN ( [ ALL | DISTINCT ] expression ) 


Hp expression JE W fit , 91 , eR SX A XL 
[918.35] 求 选修 课程 号 为 101 的 课程 的 学 生 的 最 高 分 和 最 低 分 。 


SELECT MAX(grade), MIN(grade)FROM sc WHERE cno= '101'; 


(3) SUM 函数 和 AVG 函数 。SUM( ) 和 AVG( ) 函 数 分 别 用 于 求 表达 式 中 所 有 值 项 
的 总 和 与 平均 值 ,语法 格式 为 : 


SUM / AVG ( [ ALL | DISTINCT ] expression ) 
【 例 8.36】 求学 号 为 *130602” 的 学 生 所 学 课程 的 总 成 绩 。 


SELECT sno, SUM(grade) AS ' 课 程 总 成 绩 ' FROM sc WHERE sno- '130602'; 


5. 分 组 查询 


在 数据 查询 过 程 中 ,经 常 需要 将 数据 进行 分 组 ,以便 对 各 个 组 进行 统计 分 析 。 在 
MySQL 数据 库 中 ,分 组 统计 是 由 GROUP BY 子 句 、 集 合 函 数 .HAVING 子 句 共同 实现 的 。 

分 组 查询 的 基本 语法 : 

SELECT column, group_function，… 

FROM table 

[WHERE condition] 

[GROUP BY group by expression] 

[HAVING group condition] 

[ORDER BY column[ASC|DESC]] ; 

注意 : 

GROUP BY 子 句 用 于 指定 分 组 列 或 分 组 表达 式 。 

集合 函数 用 于 分 组 统计 。 如 果 未 对 查询 分 组 , 则 集合 函数 将 作用 于 整个 查询 结果 ; 如 
果 对 查询 结果 分 组 , 则 集合 函数 将 作用 于 每 一 个 组 , 即 每 一 个 组 都 有 一 个 集合 函数 。 

HAVING 子 句 用 于 限制 分 组 的 返回 结果 。 

WHERE 子 句 对 表 中 的 数据 进行 过 滤 ,HAVING 子 句 对 分 组 后 形成 的 组 进行 过 滤 。 
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在 分 组 查询 中 ,SELECT 子 句 后 面 的 所 有 目标 列 或 目标 表达 式 可 以 分 组 列 或 分 组 表达 
式 或 集合 函数 

a) 单列 分 组 查询 。 将 查询 出 来 的 记录 按照 某 一 个 指定 的 列 进行 分 组 ,分 组 列 的 值 相 
等 的 记录 为 一 组 ,然后 对 每 一 个 组 进行 统计 。 

【 例 8.37】 查询 课程 号 及 选课 人 数 。 


SELECT cno 课程 编号 ，count(sno) 选 课 人 数 FROM sc 
GROUP BY cno; 


实例 效果 如 图 8. 44 所 示 。 


mysql> SELECT cno i: ce E - 





> GROUP BY cno 








图 8.44 单列 分 组 查询 


(2) 使 用 HAVING 子 句 限制 返回 组 。 如 果 需 要 对 分 组 后 的 查询 结果 做 进一步 限制 ,可 
以 使 用 HAVING 子 句 ,只 有 满足 条 件 的 组 才 会 返回 。 
【 例 8.38】 查询 选修 了 三 门 以 上 课程 的 学 生 学 号 。 





SELECT sno FROM sc 
GROUP BY sno 
HAVING COUNT( * )> 3; 


8.3 MySOL 数据 库 备份 与 恢复 


尽管 系统 采取 了 各 种 措施 来 保证 数据 库 的 安全 性 和 完整 性 ,但 硬件 故障 .软件 错误 、 病 
毒 . 误 操作 或 故意 破坏 仍 可 能 发 生 , 这 些 故障 可 能 会 破坏 数据 库 , 使 数据 库 中 的 数据 部 分 或 
全 部 丢失 。 因 此 数据 库 管理 系统 都 提供 了 把 数据 库 从 错误 状态 恢复 到 某 一 正确 状态 的 功 
能 ,这 种 功能 称 为 恢复 。 恢 复 是 以 备份 为 基础 的 。 ihe 
MySQL 的 备份 和 恢复 组 件 为 存在 MySQL 数据 库 中 的 数据 提供 了 保护 手段 。 


8.3.1 使 用 命令 行 备份 和 恢复 数据 库 


在 MySQL 软件 中 经 常 通过 命令 实现 数据 备份 ,使 用 备份 命令 会 将 包含 数据 的 表 结 构 
和 数据 内 容 保 存在 相应 的 文本 文件 中 。 具 体 执 行 时 ,首先 会 检查 所 需要 备份 数据 的 表 结 构 ， 
在 相应 的 文本 文件 中 生成 CREATE 语句 。 然 后 检查 数据 内 容 , 在 相应 的 文本 文件 中 生成 
INSERT INTO 语句 。 还 原 数 据 时 ,只 需要 执行 文本 文件 中 的 CREATE 语句 和 INSERT 
INTO 语句 。 下 面 详 细 介绍 命令 行 备份 和 恢复 数据 库 。 
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1. 用 mysqldump 命令 进行 备份 数据 库 
在 MySQL 软件 中 备份 一 个 数据 库 通过 命令 mysqldump 来 实现 ,其 命令 形式 如 下 : 
mysqldump - h localhost - u username — p dbname tablel table2. tablen > backupname. sql 


上 述 语句 中 ,-h 后 面 所 跟 的 参数 值 指出 备份 的 数据 库 在 本 机 ; -u 后 面 的 username 参 
数 表示 用 户 名 ; -p 指 ‘14; 参数 值 dbname 表示 数据 库 ; 参数 值 table 表示 要 备份 的 表 ， 
如 果 没 有 参数 值 table, 则 表示 备份 整个 数据 库 ; 
Xt. 

(61 8.39) 通过 超级 用 户 root 登录 到 MySQL 服务 器 ,然后 备份 xscj 数据 库 。 

具体 步骤 ; 

(1) 打开 DOS 终端 ,进入 Bin 目录 ,路 径 为 C:\Program Files\MySQL\MySQL Server 
5. 5\bin, 

(2) 执行 命令 mysqldump, f& () BE xscj ,具体 内 容 如 下 。 








参数 值 backupname. sql 表示 所 生成 的 备份 





mysqldump - h localhost -u root — p123456 xscj>c:\xscj_2014. sql 


运行 效果 如 图 8. 45 所 示 





C:\Documents and Settings dministrator>cd\ 
iC:\>ed C:\Program Files \MySQL\MySQL Server 5.5\bin 


ySQLMMySQL Server 5.5\bin>mysqldump -h localhost -u root -pi23 
2014.sql 


C:\Program Files\MySQL\MySQL Server 5.5\bin>. 





图 8.45 xscj 数据 库 的 备份 


说 明 : 该 命令 结束 没有 分 号 ; 可 以 在 命令 里 指定 想 要 存放 的 目录 ,本 例 设 定 备 份 文 件 

为 C 磁盘 下 的 文件 xscj 2014. sql, 结 果 生 成 的 xscj_2014. sql 文件 会 自动 存在 指定 目录 下 ; 

-h,-u 两 个 参数 名 与 参数 值 之 间 可 用 或 不 用 空格 分 隔 , 但 -p 参数 的 参数 名 与 参数 值 之 间 是 
- 定 不 能 加 空格 的 ,也 可 以 这 样 输入 : 











mysqldump - hlocalhost - uroot - p xscj > xscj_2014. sql 


执行 该 命令 时 ,会 显示 “Enter password:”, 此 时 输入 密码 也 可 以 实现 成 功 备份 。 执 行 
过 程 如 图 8. 46 所 示 。 


C:\Program Files\MySQL\MySQL Server 5.5\bin> 








图 8.46 ”xscj 数据 库 的 备份 命令 
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(3) 打开 磁盘 C, 将 创建 一 个 名 为 xscj_2014. sql 的 新 文件 ,具体 内 容 如 下 。 


—- MySQL dump 10.13 Distrib 5.5.37, for Win32 (x86) 


—- Host: localhost Database: xscj 
—- Server version5.5.37 


/*!40101 SET (OLD CHARACTER SET CLIENT = (2(&)CHARACTER SET CLIENT * /; 

/*!40101 SET (ZOLD CHARACTER SET RESULTS = ((U)CHARACTER SET RESULTS * /; 

/ * 140101 SET (OLD COLLATION CONNECTION = (2 (&COLLATION CONNECTION * /; 

/ * 140101 SET NAMES utf8 * /; 

/*140103 SET (3OLD TIME ZONE = (2(Q TIME ZONE * /; 

/ * 140103 SET TIME ZONE- ' + 00:00' * /; 

/ * 140014 SET (QOLD UNIQUE CHECKS = (à(&UNIQUE CHECKS, UNIQUE CHECKS = 0 x /; 

/ * 140014 SET (QOLD FOREIGN KEY CHECKS = (2(2FOREIGN KEY CHECKS, FOREIGN KEY CHECKS-0 */; 
/*!40101 SET (3OLD SQL MODE = @@SQL_MODE, SQL MODE = 'NO AUTO VALUE ON ZERO' * /; 

/ * 140111 SET (20LD SQL NOTES = (2(89SQL NOTES, SQL NOTES- 0 */; 


—- Table structure for table 'dept' 


DROP TABLE IF EXISTS 'dept'; 
/ * 140101 SET (Zsaved cs client = (&(Bcharacter set client * /; 
/*140101 SET character set client = utf8 */; 
CREATE TABLE 'dept'( 
'dno' varchar(6) NOT NULL, 
'dname' varchar(20) NOT NULL, 
'dloc'varchar(50) DEFAULT NULL, 
PRIMARY KEY ('dno') 
) ENGINE = InnoDB DEFAULT CHARSET = utf8; 
/ * 140101 SET character set client = @saved_cs_client */; 


—- Dumping data for table 'dept' 


LOCK TABLES 'dept' WRITE; 
/ * 140000 ALTER TABLE 'dept' DISABLE KEYS * /; 

INSERT INTO 'dept' VALUES ('070001', ' 计 算 机 科学 与 技术 系 ', '11 号 楼 12 JÆ 1201'), ('070002', ' 网 络 工 
程 系 ', '11 号 楼 12 层 1202'), ('070003', ' 信 息 技 术 系 ', '11 号 楼 12 Æ 1203'); 

/ * 140000 ALTER TABLE 'dept'ENABLE KEYS * /; 

UNLOCK TABLES; 


—- Table structure for table 'kc' 


DROP TABLE IF EXISTS 'kc'; 
/ * 140101 SET @saved cs client = (&(Qcharacter set client */; 
/*!40101 SET character set client = utf8 */; 
CREATE TABLE 'kc' ( 
'cno' varchar(3) NOT NULL, 


动态 网 站 开发 教程 (Dreamweaver+MySQL+PHP) 


'cname' varchar(20) NOT NULL, 
'term' int(11) DEFAULT NULL, 
'period'int(11) DEFAULT NULL, 
'credit'int(11) DEFAULT NULL, 
PRIMARY KEY ('cno') 
) ENGINE = InnoDB DEFAULT CHARSET = ut f8; 
/*!40101 SET character set client = (saved cs client * /; 


—- Dumping data for table 'kc' 


LOCK TABLES 'kc' WRITE; 

/ * 140000 ALTER TABLE 'kc' DISABLE KEYS * /; 

INSERT INTO 'kc' VALUES ('101', ' 计 算 机 文化 基础 ', 1, 64, 4), ('102', ' 面 向 对 象 程序 设计 ', 2, 64, 4)， 
(103*, 数据 结构 ',3,64,4), ('104', ' 操 作 系统 ',3, 48, 3), C105*, 数据 库 原理 ',4,64,4), ('106', 离散 
数学 ',3,80,5); 

/ * 140000 ALTER TABLE 'kc' ENABLE KEYS * /; 

UNLOCK TABLES; 


—- Table structure for table 'sc' 


DROP TABLE IF EXISTS 'sc'; 
/ * 140101 SET @saved cs client = @@character set client */; 
/*140101 SET character set client = utf8 */; 
CREATE TABLE 'sc'( 
'sno' varchar(6) NOT NULL, 
'cno' varchar(3) NOT NULL, 
'grade' int(3) DEFAULT NULL, 
PRIMARY KEY ( 'sno', 'cno') 
) ENGINE = InnoDB DEFAULT CHARSET = utf8; 
/*!40101 SET character set client = (Gsaved cs client */; 


—- Dumping data for table 'sc' 


LOCK TABLES 'sc' WRITE; 
/ * 140000 ALTER TABLE 'sc' DISABLE KEYS * /; 

INSERT INTO 'sc' VALUES ('130601', '101', 85), ('130601', 102', 90), (*130602', '101', 90), ( 1130602", 102 
",70), ('130603', '101', 87), (130603', '102', 50), ('130605', '101', NULL) ; 

/ * 140000 ALTER TABLE 'sc' ENABLE KEYS * /; 

UNLOCK TABLES; 


—- Table structure for table 'xs' 


DROP TABLE IF EXISTS 'xs'; 

/ * 140101 SET @saved cs client = (&(ücharacter set client */; 
/*!40101 SET character set client = utf8 */; 

CREATE TABLE 'xs'( 
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'sno' varchar(6) NOT NULL, 
'sname' varchar(10) NOT NULL, 
'sex' char(2) DEFAULT NULL, 
'bir' date DEFAULT NULL, 
'dno' varchar(6) DEFAULT NULL, 
PRIMARY KEY ('sno') 
) ENGINE - InnoDB DEFAULT CHARSET - utf8; 
/*!40101 SET character set client = @saved cs client */; 


—- Dumping data for table 'xs' 


LOCK TABLES 'xs' WRITE; 
/ * 140000 ALTER TABLE 'xs' DISABLE KEYS * /; 

INSERT INTO 'xs' VALUES ('130601', ' 赵 林 林 ', ' 女 ', 1995 - 02 — 10", 070001"), (130602, EF", ' 女 ', 1994 
— 10 - 03', 070002"), ('130603', 张强 , '83 ', 1995 — 08 — 08', '070001'), (130604', E E E, ' 男 ', 1994 
— 06 — 10', 070001"), ('130605', ' Hf", ' 女 ', 1994 — 11 — 01', '070001"), ('130606', E fit ', ' 女 ', 1995 
- 02 - 10', 070003"); 

/ * 140000 ALTER TABLE 'xs' ENABLE KEYS * /; 

UNLOCK TABLES; 

/*140103 SET TIME ZONE- (OLD TIME ZONE * /; 


/ * 140101 SET SQL MODE = @OLD_SQL MODE * /; 

/ * 140014 SET FOREIGN KEY CHECKS = (OLD FOREIGN KEY CHECKS * /; 

/ * 140014 SET UNIQUE CHECKS = (OLD UNIQUE CHECKS * /; 

/ * 140101 SET CHARACTER SET CLIENT = (&0LD CHARACTER SET CLIENT * /; 

/ * 140101 SET CHARACTER SET RESULTS = (&OLD CHARACTER SET RESULTS * /; 
/ * 140101 SET COLLATION CONNECTION = (&OLD COLLATION CONNECTION * /; 

/ * 40111 SET SQL NOTES = (OLD SQL NOTES * /; 


—- Dump completed on 2014 - 07 - 03 17:51:03 


2. 通过 mysql 命令 实现 数据 还 原 
在 MySQL 软件 中 还 原 数据 库 通过 mysql 命令 实现 .其 语法 形式 为 : 
mysql -u username - p [dbname] < backupname. sql 


上 述 语句 中 ,username 参数 值 表示 用 户 名 ; BR backupname. sql 表示 所 用 来 还 原 的 备 
份 文件 ; 参数 dbname 为 用 户 指定 数据 库 的 名 称 , 可 以 指定 也 可 以 不 指定 ,指定 数据 库 时 表 
示 还 原 该 数据 库 下 的 表 , 不 指定 数据 库 时 表示 还 原 备份 文件 中 的 所 有 数据 库 。 
[58.40] 通过 超级 用 户 root 登录 到 MySQL 服务 器 ,然后 利用 之 前 所 生成 的 备份 文 





件 还 原 MySQL 数据 库 。 假 设 xsci 数据 库 损 坏 , 用 备份 文件 进行 恢复 ,前 提 : 先 新 建 xsci 数 
具体 步骤 如 下 。 


(1) 执行 SQL 语句 CREATE DATABASE, 在 数据 库 服 务 器 里 创建 名 为 xscj 的 数据 
库 。 其 结果 如 图 8. 47 所 示 。 
(2) 执行 命令 mysql, 还 原 数 据 库 , 具 体 命令 如 下 : 





infornation : 


mysql 
perfornance_schena 


+ 
l4 
Inysq1> create database xscj 

Query OK, 1 row affected (8.82 sec) 


Inysq1» 





图 8.47 创建 数据 库 
xscj < c:\xscj_2014. sql 


mysql  - hlocalhost  - uroot  - p123456 


输入 此 命令 后 ,数据库 中 的 数据 将 恢复 到 备份 时 的 状态 。 其 结果 如 图 8. 48 所 示 。 





ySQL\MySQL Server S5.5wbin?nysql -hlocalhost 
14.sql 


sNMySQLNMySQL Server 5.5\bin>. 





图 8.48 还 原 数 据 库 xscj 


(3) 为 了 校 验 是 否 成 功 ,执行 下 面 语句 查看 xscj 数据 库 xs 表 中 的 内 容 , 具 体 如 图 8. 49 


所 示 o 





e changed 
lect * from x: 








图 8.49 查询 xs 表 中 数据 


注意 : 恢复 时 ,xscj 数据 库 必 须 存 在 ,数据 库 可 空 ,恢复 时 会 自动 删除 要 恢复 的 表 , 再 重 
新 创建 ,插入 数据 。 

8.3.2 使 用 MySOL 界面 工具 进行 备份 和 恢复 

8.3.1 节 通 过 DOS 命令 来 实现 数据 库 备份 和 恢复 ,本 节 通 过 具体 实例 来 说 明 如 何 通过 
客户 端 软件 SQLyog 进行 备份 和 恢复 操作 
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1. 通过 客户 端 软件 SOLyog 进行 备份 数据 库 操作 


(61 8.41] 同 例 8. 39 ,备份 数据 库 xscj 。 

具体 步骤 如 下 : 

CD 首先 连接 数据 库 服 务 器 ,在 对 象 资源 管理 器 窗口 中 显示 MySQL 数据 库 管理 系统 
中 所 有 的 数据 库 , 如 图 8. 50 所 示 。 





TERES xscj San Ee 


WES (Ctrl +Shi 自动 充 成 : [Tab]-» 下 一 个 标签 [Ctrl+Space]-> 列 出 所 … 
Big root@localhost 

国 É information sch 

m B nysa 

S E performance sch: 

困 B test ia Tu 

sp B2288 ia 





图 8.50 连接 MySQL 数据 库 管理 系统 


COD 右 击 “对 象 资源 管理 器 "窗口 中 数据 库 xscj, 在 出 现 的 菜单 中 选择 “备份 /导出 ”|“ 备 
份 数据 库 , 转 储 到 SQL…” 命 令 , 如 图 8. 51 所 示 , 则 会 打开 “以 批 处 理 脚 本 向 导 导 出 数据 ”对 
话 框 。 
第 选 表格 xsej CB x 
TERE (Curl ¥Shi FB) ]| 自动 完成 [Tab]-> 下 一 个 标签 [ctrl+Space]-> 列 出 所 有 标签 [Ctri+enter]-> ... 
Bip root@localhost 
国 É information schena 
@ 图 nysa 
困 图 performance schema 
国 B test 
人 
E! 创建 数据 库 Ctrl+D 
局 改变 数据 库 FB 
QJ 新 数据 搜索 Ctrl+Shift+D 
alae » 
更 多 数据 库 操作 


备份 /导出 | ws itta. CtrltAltts 
导入 "| 
TH 在 创建 数据 库 架 构 HTHL . . Ctrl+Shi ft+ 和 ttS 




















图 8.51 选择 备份 等 命令 


(3) 在 “SQL 转 储 ” 对 话 框 中 ,在 “数据 库 名 称 ” 下 拉 列 表 框 中 选择 相应 的 数据 库 , 具 体 设 
置 如 图 8. 52 所 示 ,表示 备份 xscj 数据 库 。 单 击 “ 导 出 到 文件 ”文本 框 右边 [J 按钮 选择 输入 
导出 文件 名 称 , 若 输入 的 文件 不 存在 , 则 创建 文件 名 为 输入 名 称 的 文件 。 本 例文 件 名 称 为 
xscj 2014. sql。 然 后 单 击 “ 导 出 ”按钮 。 导 出 成 功 后 , 单 击 “ 完 成 ”按钮 ,完成 备份 数据 库 操 
作 , 通 过 上 述 步 又 ,可 以 成 功 备份 所 选 定 的 数据 库 。 






































口 转 储 前 刷新 日 志 






































Mas TERES) 
OAE DEFINER. 























图 8.52 备份 xscj 数据 库 


2. 通过 客户 端 软件 SQLyog 进行 还 原 操作 

【 例 8.42】 同 例 8. 40, 通 过 备份 文件 还 原 数据 库 xscj 。 

具体 步骤 如 下 : 

CD 首先 连接 数据 库 服务 器 ,在 “对 象 资源 管理 器 ”窗口 中 显示 MySQL 数据 库 管理 系 
统 中 所 有 的 数据 库 。 单 击 xscj 结 点 将 显示 该 数据 库 下 的 所 有 表 。 

(2) 右 击 “对 象 资源 管理 器 ”窗口 中 数据 库 xscj 结 点 ,在 出 现 的 菜单 中 选择 “导入 ”1“ 执 
行 SQL 脚本 ”命令 ,如 图 8. 53 所 示 , 则 会 打开 “从 一 个 文件 执行 查询 ”对 话 框 。 





[7 


xsej WB x 


Cerltshi ft 





|] 自动 完成 : [Tab]-> 下 一 个 标签 [Ctri+Space]-> 列 出 所 有 标签 ， [Ctrl+Enter]-> … 

Big -ootelocalhost 
Gi B] information schema 
S B oysa 
m E performance schema 
S B test 
us ERS BITRE SHE HE 

R one 

Barer... 

e) 新 数据 搜索 





Ctrl+D 
re 
Ctrl+Shift+D 
> 
> 





D 


| 8 导入 外 部 数据 - Ctrl+Alt+o 
WI 在 他 肝 数据 库 架 构 HTNL . . CtrltshifttALtts Rusu CtrliShifttQ 














图 8. 53 选择 导入 命令 
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CD 在 “从 一 个 文件 执行 查询 ”对 话 框 中 ,为 “文件 执行 ”对话 框 选择 相应 的 备份 文件 ,如 
图 8. 54 所 示 , 然 后 单 击 “ 执 行 ”按钮 就 可 以 实现 还 原 操作 , 当 还 原 操作 完成 该 对 话 框 中 的 “ 关 
闭 ” 按 钮 就 会 变 成 “完成 ”按钮 ,最 后 单 击 “ 完 成 ”按钮 则 实现 还 原 操作 ,如 图 8. 55 所 示 。 


从 一 个 文件 执行 查询 


执行 储存 在 sq 批 处 理 文件 中 的 查询 ， Fhe ED ad 
PRE RAR ， 这 个 选项 非常 有 | 





















































8.55 还 原 操作 完成 


(4) 为 了 校 验 还 原 操作 是 否 成 功 , 单 击 * 刷 新 对 象 浏览 器 "按钮, 在“ 对象 资源 管理 器 " 窗 
口中 的 xscj 结 点 会 显示 数据 库 对 象 表 。 选 择 表 xs, 然 后 单 击 “数据 ?选项 卡 标签 ,就 会 显示 
表 中 的 数据 。 

通过 上 述 步骤 ,可 以 从 备份 文件 中 还 原 数 据 库 。 


小 结 
€ 


本 章 详 细 介 绍 了 目前 常用 的 MySQL 关系 型 数据 库 管 理 系统 的 使 用 ,包括 使 用 SQL 在 
MySQL 命令 行 客户 端 软件 和 常用 的 图 形 化 管理 软件 (SQLyog 软件 ) 中 完成 数据 库 及 数据 
库 对 象 一 一 表 的 操作 , 表 中 数据 的 增删 改 查 操作 以 及 数据 库 的 备份 与 恢复 操作 。 重 点 需 掌 
握 SQL 关系 数据 库 语言 ,MySQL 关系 型 数据 库 管理 系统 的 使 用 (包括 数据 库 的 基本 操作 、 
表 的 基本 操作 .数据 查询 和 数据 操作 、 数 据 库 的 备份 和 恢复 ) ,为 进一步 学 习 动态 网 站 开发 打 
好 基础 。 
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Nw 
习题 


1. 简 述 SQL 的 分 类 。 
2. 按 如 表 8. 3 一 表 8. 5 所 示 结 构 利 用 SQL 语句 创建 xscj 数据 库 , 并 在 该 数据 库 中 创建 


Xs、kc、sc 三 个 表 。 














表 8.3 xs 
列 名 数据 类 型 OR 备注 
Sno varchar(6) 主键 学 号 
sname varchar(10) 姓名 
sex varchar(2) 性 别 
bir date 出 生日 期 
dno varchar(6) 所 在 系 编号 
表 8.4 ke 
列 名 数据 类 型 约束 备注 
cno varchar(6) 主键 课程 编号 
cname varchar(10) 课程 名 称 
term int 开课 学 期 
period int 学 时 
credit int 学 分 
表 8.5 sc 
列 名 数据 类 型 约束 备注 
sno varchar(6) 主键 学 号 
cno varchar(6) 主键 课程 编号 
grade int 成 绩 


3. 为 xs 表 添加 总 学 分 和 备注 两 列 。 总 学 分 数据 类 型 为 整数 类 型 ; 备注 数据 类 型 为 文 
本 类 型 。 

4. 在 xscj 数据 库 的 表 xs 中 插入 如 下 信息 : 学 号 : 130601, 姓 名 : 赵 林 林 , 性 别 ,出 生日 
期 : 1995-02-10, 所 在 院 系 编号 : 070001。 

5. 将 xscj 数据 库 xs 表 中 学 号 为 "130601? 学 生 的 姓名 改 为 “ 赵 林 ”。 

6. 使 用 select 语句 实现 例 8. 13 一 例 8. 38 题目 查询 要 求 。 

7. 使 用 命令 行 对 xscj 数据 库 进行 备份 。 

8. 假设 xscj 数据 库 损坏 ,利用 前 面 做 过 的 备份 文件 使 用 命令 行 对 xscj 数据 库 进行 恢 
复 ,并 验证 恢复 是 否 成 功 。 

9. 使 用 MySQL 界面 工具 对 xscj 数据 库 进 行 备份 。 

10. 假设 xscj 数据 库 损坏 ,利用 前 面 做 过 的 备份 文件 使 用 MySQL 界面 工具 对 xscj 数 
据 库 进行 恢复 ,并 验证 恢复 是 否 成 功 。 
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本 章 要 点 : 

* PHP RABE; 

。 PHP 中 的 数据 类 型 ; 
运算 符 与 表达 式 ; 

PHP 字符 串 ， 
使 用 数组 ; 

流程 控制 ; 

使 用 函数 使 代码 模块 化 。 


PHP( Hypertext Preprocessor) 语 言 是 一 种 易于 学 习 和 使 用 的 ,用 于 创建 动态 交互 性 网 
站 的 服务 器 端 脚本 语言 ,由 于 其 类 似 C 语言 的 简洁 语法 .丰富 的 组 件 扩展 以 及 完全 免费 等 
特性 ,自从 20 世纪 90 年 代 中 期 问世 以 来 ,就 受到 了 Web 开发 人 员 的 热烈 欢迎 ,被 广泛 应 用 
在 各 种 类 型 的 网 站 建设 中 。 


8.1 PHP 基本 语法 


9.1.1 _ PHP 标记 风格 


在 PHP 程序 中 ,通常 会 包含 HTML 标签 。 为 了 让 PHP 解释 器 能 够 在 运行 代码 时 将 
两 者 区 分 ,可 以 采用 以 下 几 种 格式 来 表示 PHP 代码 : 
dite 


<script language = "php"> … </script> 
<% e $5» 


在 编写 PHP 代码 时 ,可 以 选用 其 中 一 种 代码 格式 。 不 过 需要 注意 的 是 ,如 果 用 第 一 种 
方式 二 ? 和 ? 二 来 开始 和 结束 脚本 块 这 种 写法 ,只 能 在 支持 简写 的 服务 器 上 和 运行。 因此 ,为 
了 达到 最 好 的 兼容 性 ,在 正式 的 部 署 环 境 中 建议 使 用 标准 形式 (二 ? php) ,而 不 用 简写 
形式 。 

与 Perl 和 C 一 样 , PHP 中 的 每 个 代码 行 都 必须 以 分 号 (;) 结 束 。 分 号 是 一 种 分 隔 符 ， 
用 于 把 指令 集 区 分 开 来 。 
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9.1.2 PHP 程序 注释 


PHP 同时 支持 C,C++ 和 UNIX 风格 的 注释 方式 : 


/* C,Ct+ 风 格 多 行 注释 * / 
// C++ 风 格 单行 注释 
Ë UNIX 风格 单行 注释 


一 般 来 说 ,在 PHP 中 ,使 用 // 来 编写 单行 注释 ,使 用 / * 和 * /来 编写 一 些 大 的 注释 块 。 
9.1.3 使 用 PHP 输出 HTML 


PHP 代码 是 服务 器 脚本 ,在 后 台 运 行 ,如 果 想 要 将 运行 数据 在 浏览 器 输出 ,必须 使 用 自 
带 的 显示 函数 输出 。 一 般 使 用 echoC ) 和 print( ) 这 两 种 函数 。 

在 例 9. 1 中 ,运用 上 面 所 学 的 知识 编写 了 一 段 简单 的 PHP 脚本 , 它 可 以 向 浏览 器 输出 
文本 “Hello World”。 在 此 例 中 ,使 用 了 echo 语句 来 输出 文本 “Hello World”, 

【 例 9.1】 在 浏览 器 中 输出 文本 “Hello World”. 


<HTML> 

« HEAD» 

</HEAD > 

< BODY > 
<Hl > 
First PHP page 
</H1 > 
«HR» 
2 
// Single line C++ style comment 
/* 
printing the message 
*/ 
echo "Hello World!"; 
* Unix style single line comment 
?> 

</BODY> 

</HTML> 


9.2 PHP 中 的 数据 类 型 
7l 


PHP 的 值 的 数据 类 型 是 变量 的 数据 类 型 .在 PHP 中 变量 不 需要 声明 就 可 以 直接 赋值 ， 
赋值 的 类 型 就 是 变量 的 类 型 。 

PHP 支持 6 种 基本 的 数据 类 型 ,包括 整数 integer、 浮 点 数 float、 字 符 串 string、 数 组 
array、 对 象 object 和 布尔 型 boolean, 232b. PHP 还 支持 两 种 特殊 的 数据 类 型 NULL( 空 ) 
和 resource( 资 源 )。 常 见 的 数据 类 型 如 表 9. 1 所 示 。 
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表 9.1 数据 类 型 表 
数据 类 型 简 介 示 例 
$a = 1234; # 十 进 制 数 
$a = -123; + ARM 
$a = 0123; # 八 进 制 数 (等 于 十 进 制 数 的 83) 
以 x 
数值 ”| 数值 类 型 可 以 是 整数 或 是 浮 点 数 ere # 十 六 进 制 数 (等 于 十 进 制 数 的 18) 
$a = 1.234; £1 RNC XU ECT 
$a = 1.2e3; # 双 精 度数 的 指数 形式 





字符 串 可 以 由 单 引号 或 双 引号 引 
出 的 字段 定义 。 注 意 不 同 的 是 被 
单 引号 引出 的 字符 串 是 以 字面 定 
义 的 ,而 双 引 号 引出 的 字符 串 可 
VAM E. RAL CR #925) 9T 
以 被 用 来 分 隔 某 些 特殊 字符 


字符 串 


$first = 'Hello'; 

$ second = "World"; 

$ fulll = "$first $ second"; £ j^/F: Hello World 
$full2 = '$first $ second'; 井 产生 $ first $ second 





PHP 提供 数组 和 哈 希 表 的 支持 ， 
可 以 用 list() 或 者 array() 来 定义 
它们 ,也 可 以 直接 为 数组 赋值 。 
数组 的 索引 从 0 开始 


数组 


// 一 个 包含 两 个 元 素 的 数组 
$ myarray = array ( 
"keyl" =>"00001", 
"key2" - —"00002", 
"key3" = —"00003" 

E 





对 象 “| 使 用 new 语句 产生 一 个 对 象 








class foo 
{ 
function do_foo () 
{ 
echo "Doing foo. "; 
} 
// 实 例 化 该 类 型 , 并 调用 相应 的 方法 
$ bar = new foo; 

$ bar - >do_foo(); 





在 PHP 中 .变量 会 在 使 用 时 被 自动 声明 。 因 此 .PHP 通常 被 称 作 松 散 类 型 的 语言 


(Loosely Typed Language) 。 


则 会 自动 被 当成 字符 串 处 理 。 


例如 ,变量 $ abe=123 ,在 进行 数学 运算 时 ,将 被 当 作 整数 处 理 ,而 在 进行 echo 输出 时 ， 


例 9. 2 是 一 段 PHP 中 典型 的 声明 变量 的 例子 。 


【 例 9.2】 声明 变量 。 


<?php 

$txt = "Hello World!"; 
$number = 16; 

?» 
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在 例 9. 2 中 ,创建 了 一 个 存 有 字符 串 的 变量 $ txt 和 一 个 存 有 数值 的 变量 $ number, nf 
以 看 到 在 这 个 过 程 中 ,不 需 指定 任何 变量 的 数据 类 型 。PHP 的 这 种 特性 大 大 简化 了 开发 人 
员 编 写 代 码 的 难度 ,提高 了 程序 的 开发 效率 。 

当然 ,根据 需要 ,开发 人 员 也 可 以 通过 函数 cast 或 者 settype 来 对 数据 类 型 进行 明确 的 
设 定 或 强制 类 型 转换 。 

PHP 中 允许 的 强制 类 型 转换 有 以 下 几 种 。 

(int) , (integer) 转换 成 整 型 

(bool) , (boolean) 转换 成 bool 型 

(float) , (double) , (real) 一 一 转换 成 浮 点 型 

(string) 一 一 转换 成 字符 串 

(array) 一 一 转换 成 数组 

(object) 一 一 转换 成 对 象 


@.3 运算 符 与 表达 式 








9.3.1 PHP 变量 


在 程序 运行 时 ,存储 在 内 存 中 的 数据 有 两 种 形态 。 在 程序 运行 中 不 改变 的 值 称 为 常量 ， 
根据 条 件 发 生变 化 的 值 称 为 变量 。 

PHP 中 变量 都 是 以 美元 符号 *$ ”标记 的 变量 名 来 表示 的 ,定义 变量 时 要 遵守 一 定 的 命 
名 规则 。 

(1) 变量 名 必须 以 字母 或 下 划 线 ”开头 。 

(2) 变量 名 只 能 包含 字母 .数字 字符 以 及 下 划 线 。 

(3) 变量 名 不 能 包含 空格 。 如 果 变 量 名 由 多 个 单词 组 成 ,那么 应 该 使 用 下 划 线 进行 分 
隔 ( 比 如 $ my. string) ,或 者 以 大 写字 母 开 头 ( 比 如 $myString)。 

通常 将 变量 用 于 存储 值 ,比如 数字 、 字 符 串 或 函数 的 结果 ,这 样 就 可 以 在 PHP 脚本 的 
运算 过 程 中 多 次 使 用 它们 了 。 

fe PHP 中 ,符号 “==” 不 表示 相等 ,而 表示 赋值 ,是 将 一 个 值 指 定 给 一 个 变量 , 它 表示 把 
“二 ”右边 的 表达 式 的 值 赋 给 左边 的 变量 ,如 “$a 二 5” 表 示 将 5 赋 给 $a。 因 此 ,在 PHP 中 设 
置 变量 的 正确 方法 是 : 





$var name = value; 


9.3.2 PHP 运算 符 

PHP 具有 C 和 C++ 中 的 通常 见 到 的 运算 符 , 这 些 运 算 符 的 优先 级 也 是 一 致 的 。PHP 
运算 符 包 括 : 算术 运算 符 、 赋 值 运算 符 、 比 较 运算 符 、 逻 辑 运算 符 等 。 

PHP 常用 的 算术 运算 符 如 表 9. 2 所 示 。 
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表 9.2 PHP 常用 运算 符 








运算 符 说 明 例子 结果 
+ 加 x=2 4 
xt2 
一 减 x=2 3 
5—x 
* 乘 x=4 20 
x*5 
/ 除 15/5 
5/2 2.5 
% 取 模 5542 1 
10268 
10262 
++ 递增 x 一 5 
x 十 十 = 
== 递减 x=5 x=4 
yo 
【 例 9.3】 变量 赋值 运算 。 
<?php 
$a=5; 
$b=3; 
$num= $a+ $b; 
echo $ num; // 输 出 8 
?> 


PHP 常用 的 赋值 运算 符 如 表 9. 3 所 示 。 
表 9.3 PHP 赋值 运算 符 





运算 符 例子 结果 
一 x=y x=y 
+= xt=y x=xty 
一 一 x 一 一 x—x—y 
关 一 x* =y x=x*y 
/= x/=y x=x/y 
= x =y x= xy 
%= x%=y x=xhy 





[519.4] 字符 串 赋值 。 


«?php 

$a-10; 
$a+=3; 
echo $a; 
$ax =2; 
echo $a; 


// 输 出 13 


// 输 出 26 
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$ string = "Kif"; 
$ string. = "中 国 "; 
echo $ string; // 输 出 你 好 中 国 


?> 


PHP 常用 的 比较 运算 符 如 表 9.4 所 示 。 
表 9.4 PHP 比较 运算 符 








运算 符 说 明 例子 
一 一 是 否 相 等 5==8 
!= 是 否 不 相等 5!=8 
> 是 否 大 于 5>8 
< 是 否 小 于 5<8 
>= 是 否 大 于 等 于 5>=8 
<= 是 否 小 于 等 于 5<=8 





PHP ‘is FR (382 sitis SET] Oe 9.5 所 示 。 
X 9.5 PHP 逻辑 运算 符 





运算 符 说 明 例子 
&& 与 x 一 6 

y=3 

(x«10 && y>1) 
H 或 x 一 6 

y=3 

(x==5 || y==5) 
! 取 反 x=6 

y=3 

'(x==y) 


@.4 PHP Se 
— 


9.4.1 字符 串 的 定义 与 显示 


无 论 何 种 程序 语言 ,字符 串 操 作 都 是 一 个 重要 的 基础 。PHP 提供 了 大 量 的 字符 串 操作 
函数 ,在 PHP 中 ,一般 用 双 引 号 或 单 引 号 来 标识 一 个 字符 串 。 
【 例 9.5】 字符 串 赋值 。 


«?php 

$ stri = "你 好 "; 

echo 'stri HH’; // 输 出 stri 中 国 
echo "strl 中 国 "; // 输 出 你 好 中 国 


?> 


在 PHP 程序 处 理 字符 串 中 , 单 引号 中 的 内 容 都 会 当 作 字符 处 理 ,而 双 引 号 中 的 特殊 字 
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符 则 会 被 转 义 ,因此 上 面 的 两 个 语句 输出 结果 并 不 一 致 。 简 单 地 说 ,可 以 认为 双 引 号 里 的 内 
容 是 经 过 “解释 ”的 , 单 引号 里 的 则 是 “所 见 即 所 得 ”的 。 

PHP 里 的 输出 最 常用 的 是 echo() 和 print()。 这 两 者 都 不 是 真正 的 函数 ,而 是 语言 构 
造 ,所 以 调用 时 不 必用 双 括 号 。 在 输出 的 时 候 两 者 都 可 以 实现 赋值 。 两 者 除了 名 字 不 一 样 
外 ,还 是 有 其 他 区 别 的 。print 具有 返回 值 ,一 直 返 回 1, 而 echo 没有 ,所 以 echo 比 print 要 
快 一 些 。 也 正 因为 这 个 原因 ,print 能 应 用 于 复合 语句 中 ,而 echo 不 能 。 此 外 ,echo 一 次 可 
输出 多 个 字符 串 , 而 print 则 不 可 以 。 

定义 好 字符 串 后 ,就 可 以 对 字符 串 进行 处 理 了 。PHP 字符 串 操 作 函 数 , 不 仅 功 能 强大 ， 
使 用 也 比较 简单 。 


9.4.2 常用 字符 串 函 数 


1. 计算 字符 串 长 度 


PHP 提供 strlen() 函 数 来 计算 字符 串 的 长 度 。 需 要 注意 ,strlen() 将 中 日 等 汉字 以 及 全 
角 字 符 都 当 作 两 个 或 四 个 长 度 计算 。 
语法 格式 如 下 : 





Int strlen(string $ string) 


[519.6] 计算 字符 串 长 度 。 


<?php 

$ str1 = "hello"; 

echo strlen(str1) ; // 输 出 6 
$ str2 = "你 好 "; 

echo strlen(str2); // 输 出 4 
?> 

2. 连接 操作 符 


两 个 以 上 的 字符 串 连接 用 *. ?操作 符 , 依 字符 串 的 顺序 形成 新 的 字符 串 。 
[819.7] 连接 字符 串 。 

<?php 

$ str = "hello". "world" ; 


echo $ str // 输 出 helloworld 
?> 


3. 字符 串 的 裁剪 

一 个 字符 串 首 和 尾 , 可 能 有 不 想 要 的 部 分 ,可 以 用 trim() 、rtrim() ,ltrim() 等 函数 ,分 别 
去 除 一 个 字符 串 两 端 空格 ,一 个 字符 串 尾部 空格 ,一 个 字符 串 首部 空格 。 

【 例 9.8】 裁剪 字符 串 。 


<?php 
echo trim(" hello, world"); // 输出 "hello, world" 
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echo rtrim(" hello, world "); // 输出 "hello, world" 
echo 1trim(" hello, world") ; // 将 得 到 "hello, world" 
?> 


4. 转换 大 小 写 函 数 


对 于 英文 字母 来 说 ,可 以 用 strtoupperO 、strtolower() 函 数 将 其 转变 成 大 写 或 小 写 。 
【 例 9.9】 转换 字符 串 大 小 写 。 


<?php 

echo strtoupper("i love you"); // 输出 I LOVE YOU 
echo strtolower("I LOVE YOU") ; // 输出 i love you 
?> 

5. 比较 函数 


PHP 中 一 般 可 以 用 ! —. 三 三 直接 比较 两 个 字符 串 是 否 相等 。 此 外 ,PHP 还 提供 了 一 
组 专门 进行 字符 串 比较 的 函数 : strempO ,strcasecmp(),strncasecmp(),strncmp()。 比 较 
后 ,如 果 前 者 比 后 者 大 , 则 都 返回 大 于 0 的 整数 ; 如 果 前 者 比 后 者 小 , 则 都 返回 小 于 0 的 整 
数 ; 如 果 两 者 相等 , 则 返回 0。 

stremp() 函 数 是 用 于 区 分 大 小 写 ( 即 大 小 写 敏感 ) 的 字符 串 比 较 。 

strcasecmp() 函 数 用 于 不 区 分 大 小 写 的 字符 串 比 较 。 

strncmp O 函数 用 于 比较 字符 串 的 一 部 分 ,从 字符 串 的 开头 开始 比较 ,第 三 个 参数 为 要 
比较 的 长 度 。 

strncasecmp 用 于 不 区 分 大 小 写 的 比较 字符 串 的 一 部 分 ,从 字符 串 的 开头 开始 比较 ,第 
三 个 参数 为 要 比较 的 长 度 。 

【 例 9.10】 比较 字符 串 。 


<?php 

echo strcmp("abcdd", "aBcde") ; // 输 出 1 (>0)， 比 较 的 是 "b" 和 "B" 
echo strcasecmp("abcdd", "aBcde"); // 输 出 -1 (<0)， 比 较 的 是 "d" 和 "e" 
echo strnomp("abcdd", "aBcde", 3); // 输 出 1 (20), 比较 了 abc 和 aBc 
echo strncasecmp("abcdd", "aBcde", 3); // 输 出 0, 比较 了 abc 和 aBc 

?> 

6. 替换 函数 


蔡 换 是 指 将 一 个 字符 串 的 一 部 分 进行 改变 ,使 之 成 为 男 外 一 个 新 的 字符 串 ,以 满足 新 的 
要 求 。PHP 里 通常 用 str_replace() 函 数 进行 字符 串 的 蔡 换 。str_replace 是 大 小 写 敏感 的 。 
str replace 还 可 以 实现 多 对 一 ,多 对 多 的 蔡 换 ,但 无 法 实现 一 对 多 的 替换 。 

此 外 ,PHP 还 提供 了 substr_replace() ,实现 替换 一 部 分 的 字符 串 。 

语法 格式 如 下 : 


substr_replace( 原 字符 串 , 要 替代 的 字符 串 , 开始 替换 的 位 置 [, 替换 的 长 度 ]) 
其 中 ,开始 蔡 换 的 位 置 从 0 开始 计算 ,应 小 于 原 字符 串 的 长 度 。 要 替换 的 长 度 是 可 














第 9 章 ”PHP 语法 基础 XZ 
[519.11]. 替换 字符 串 。 
<?php 
echo substr replace("abcdefgh", "DEF", 3); // 将 输出 "abcDEF" 
echo substr replace("abcdefgh", "DEF", 3, 2); // 输出 "abcDEFfgh" 
?» 
以 上 只 是 介绍 了 PHP 全 部 字符 串 操作 函数 中 比较 常用 的 一 部 分 ,更 多 的 函数 可 以 查 
看 PHP 手册 。 由 于 PHP 是 弱 类 型 语言 ,所 以 其 他 类 型 的 数据 一 般 可 以 直接 应 用 于 字符 串 
操作 函数 里 ,而 自动 转换 成 字符 串 类 型 ,并 进行 处 理 , 如 下 面 的 两 个 语句 其 结果 是 一 样 的 。 


echo substr("1234567", 1, 3); 
echo substr(123456,1, 3); 





8.5 使 用 数组 


数组 是 一 组 有 序 的 变量 ,其 中 每 个 变量 叫做 一 个 元 素 。 数 组 中 的 每 个 元 素 都 有 自己 的 
ID, 因 此 可 以 方便 地 访问 它们 。 利 用 数组 这 种 强大 的 数据 类 型 ,可 以 在 PHP 中 实现 复杂 的 
程序 迎 辑 。 


9.5.1 数组 的 创建 和 显示 


PHP 中 的 数组 可 以 是 一 维 数组 ,也 可 以 是 多 维 数组 。 创 建 数组 使 用 的 是 array O 函数 。 
语法 格式 如 下 : 


array array([ $ keys = >] $ values, —-) 


Hie" $ keys=> $ values”, 用 逗号 分 开 , 定 义 了 关键 字 $ keys 的 键 名 和 值 $ values. A 
定义 键 名 可 以 是 字符 串 或 数字 。 如 果 省 略 了 键 名 ,会 自动 产生 从 0 开始 的 整数 作为 键 名 ,也 
可 以 自 定义 键 名 。 

【 例 9. 12】〗 创建 数组 。 


«?php 

$ arrayl = array(1,2,3,4); 

Print r( $ array1); 

// 输 出 Array([0] => 1[1] 2» 2[2] =>3[3] =>4) 

$ array2 = array("nun" = 01, "name" = " 张 三 ", "gender" = " 男 "); 
Print r( $ arrayl) ; 

// 输 出 Array( [num] = > 01 [name] = 53K = [gender] => 男 

$ array3 = array(1=>2,2=>4,5=>6,8,10); 

echo $ array3[7]; 

// 输 出 10 


?> 


在 例 9. 12 中 ,数组 $arrayl 的 键 名 是 自动 产生 的 从 0 开始 的 整数 , 键 名 分 别 是 0、1、2、 
3. MAS array2 的 键 名 是 “num”“name”“gender”。 数 组 $array3 中 8 和 10 的 键 名 省 
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略 ,数组 自动 会 给 其 分 配 键 名 ,前 一 个 数值 6 的 键 名 是 5, 所 以 8 的 键 名 是 6,10 的 键 名 是 7。 
打印 数组 函数 print. rC $ array) , 则 会 按照 一 定格 式 显 示 键 名 和 值 。 


9.5.2 数组 的 分 类 
PHP 中 主要 有 以 下 三 种 类 型 的 数组 。 
1. 数值 数组 


数值 数组 存储 的 每 个 元 素 都 带 有 一 个 数字 ID 键 。 
[519.13] 数值 数组 。 


<?php 

$names[0] = "K="; 
$names[1] = "#0"; 
$names[2] = "ER"; 
// 开 始 输出 


echo $names[1] . "fi" . $ names[2] . "JE". $ names[0] ." 的 好 朋友 "; 
// 输 出 结果 李 四 和 张 三 是 王 五 的 好 朋友 


?> 


2. 关联 数组 

关联 数组 , 它 的 每 个 ID 键 都 关联 一 个 值 。 在 存储 有 关 具 体 命名 的 值 的 数据 时 ,使 用 数 
值 数组 不 是 最 好 的 做 法 。 通 过 关联 数组 ,可 以 把 值 作为 键 , 并 向 它们 赋值 。 

【 例 9. 14】 关联 数组 。 

在 本 例 中 ,使 用 一 个 数组 把 年 龄 分 配给 不 同 的 人 : 


$ages = array(" 张 三 "=>32，" 李 四 " =>30, "EH" => 34); 





也 可 以 在 脚本 中 使 用 ID 键 : 

<?php 

$ages[ ' 张 三 '] = "32"; 

$ ages[ ' 李 四 '] = "30"; 

$ages[ ' 王 五 '] = "34"; 

echo "K=". $ ages[ ' 张 三 '] . "#T"; 

?> 

以 上 代码 会 输出 下 面 的 结果 : 

张 三 32 岁 了 

3. 多 维 数组 

在 多 维 数组 中 , 主 数组 中 的 每 个 元 素 也 是 一 个 数组 。 在 子 数组 中 的 每 个 元 素 也 可 以 是 
数组 ,以 此 类 推 。 


在 例 9.15 中 ,创建 了 一 个 带 有 自动 分 配 的 TD 键 的 多 维 数组 。 
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【 例 9.15】 多 维 数组 。 


$families = array 
( 
" 张 三 " = > array 
( 
"HDX", 
" 张 小 亮 "， 
" 张 小 明 " 
), 
" 李 四 " =>array 
( " 李 小 明 " )， 
" 王 五 "=> array 
( 
"Eye", 
"ENE", 
"王小明 " 
) 
) 
// 输 出 数组 中 的 内 容 
echo $ fanilies[ UK — '][2]; 


以 上 代码 会 输出 下 面 的 结果 : 
张 小 明 


@.6 流程 控制 
流程 控制 就 是 控制 程序 的 执行 方向 ,程序 中 通过 流程 控制 语句 来 实现 。PHP 程序 中 的 
流程 控制 语句 主要 包括 条 件 控制 语句 \ 循 环 控制 语句 ,而 且 控 制 语句 可 以 租 套 来 使 用 。 
9.6.1 条 件 控制 


PHP 提供 了 条 件 语 句 来 执行 基于 不 同 条 件 的 不 同 动 作 , 进 而 实现 程序 的 迎 辑 控制 。 常 
用 的 条 件 语句 包括 if、elseif else 以 及 switch, 其 中 ,switch 是 基于 多 个 条 件 , 其 他 的 则 是 基 
于 单个 条 件 。 


1. if---else 








如 果 希 望 在 某 个 条 件 成 立时 执行 一 些 代码 ,在 条 件 不 成 立时 执行 另 一 些 代码 ,使 用 if… 
else 语句 。 


语法 格式 如 下 : 








if (condition) 

code to be executed if condition is true; 
else 

code to be executed if condition is false; 


233 


MA 


234 
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【 例 9. 16】 if-else 程序 示例 。 


如 果 当 前 日 期 是 周 五 ,输出 “周末 快乐 1”, 否 则 会 输出 “天 天 快乐 1”: 


<html> 
<body> 
<?php 
$d= date("D"); 
if ($d== "Fri") 
echo "周末 快乐 1!"; 
else 
echo "天 天 快乐 !"; 
?> 
</body> 
</html > 


2. elself 


dn di ER d e TR PEE TT AS ,使 用 elseif 语句 。 
语法 格式 如 下 : 


if (condition) 

code to be executed if condition is true; 
elseif (condition) 

code to be executed if condition is true; 
else 

code to be executed if condition is false; 


(61 9.17] elseif 语句 示例 。 


如 果 当 前 日 期 是 周 五 ,输出 “周末 快乐 !", 如 果 是 周 日 , 则 输出 * 周 日 快乐 !", 和 否则 输 
“天 天 快乐 1”; 


<html> 
<body> 
<?php 
$d=date("D"); 
if ($d=="Fri") 
echo "周末 快乐 1"; 
elseif ( $d== "Sun") 
echo " 周 日 快乐 !"; 
else 
echo "天 天 快乐 !"; 
?> 
</body> 
«/htnl > 


3. switch 


如 果 硕 望 有 选择 地 执行 若干 代码 块 之 一 ,使 用 switch 语句 。 
使 用 switch 语句 可 以 避免 元 长 的 if…elseif…else 代码 块 。 


"n 
1 


语法 格式 如 下 : 


switch (expression) 
{ 
case labell: 
code to be executed if expression - labell; 
break; 
case label2: 
code to be executed if expression - label2; 
break; 
default: 
code to be executed 
if expression is different 
from both labell and label2; 
) 


9.6.2 循环 控制 


在 编写 代码 时 ,经常 需要 让 相同 的 代码 块 运行 很 多 次 ,这 时 可 以 在 代码 中 使 用 循环 语 扣 


来 完成 这 个 任务 。 在 PHP 中 ,可 以 使 用 下 列 循环 语句 。 
1. while 


只 要 指定 的 条 件 成 立 , 则 循环 执行 代码 块 。 
语法 格式 如 下 : 


while (condition) 
code to be executed; 


[519.18] while 语句 示例 。 
只 要 变量 i 小 于 或 等 于 5, 代 码 就 会 一 直 循环 执行 下 去 。 


<html> 
<body> 
<?php 
$i=1; 
//while 循环 
while( $i<=5) 
{ 
echo "%4: ". $i. "<br/>"; 
$ i++; 
} 
?> 
</body> 
</html> 


2. do--- while 


首先 执行 一 次 代码 块 , 然 后 在 指定 的 条 件 成 立时 重复 这 个 循环 。 
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语法 格式 如 下 : 


do 

{ 

code to be executed; 
} 


while (condition) ; 


[5/9.19] do…while 程序 示例 。 
下 面 的 例子 将 对 i 的 值 进行 一 次 累加 ,然后 ,只 要 i 小 于 5 的 条 件 成 立 ,就 会 继续 累加 
TX. 


<html > 
<body> 
<?php 
$i=0; 
//do...while 循环 
Do 
{ 

$itt; 

echo "数字 : " . $i. "<br/>"; 
} 
while ($i<5); 
?> 
</body > 
</html > 


3. for 


循环 执行 代码 块 指定 的 次 数 。 
语法 格式 如 下 : 
for (initialization; condition; increment) 


{ 
code to be executed; 


} 


注释 : for 语句 有 三 个 参数 。 第 一 个 参数 初始 化 变量 ,第 二 个 参数 保存 条 件 , 第 三 个 参 
数 包含 执行 循环 所 需 的 增 量 。 如 果 initialization 或 increment 参数 中 包括 多 个 变量 ,需要 用 
逗号 进行 分 隔 。 而 条 件 必须 计算 为 true 或 者 false. 

【 例 9.20】 for 语句 示例 。 

下 面 的 例子 会 把 文本 “Hello World!” 显 示 5 次 。 


<html> 
<body> 
<?php 
//for 循环 
for ($i=1; $i<=5; $i++) 
{ 
echo "Hello World!< br />"; 
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) 

?> 
</body> 
</html > 


4. foreach 


根据 数组 中 每 个 元 素来 循环 代码 块 。 

每 进行 一 次 循环 ,当前 数组 元 素 的 值 就 会 被 赋值 给 value 变量 (数组 指针 会 逐一 地 移 
动 ), 以 此 类 推 。 

语法 格式 如 下 : 


foreach (array as value) 
{ 

code to be executed; 
} 


【 例 9.21】 foreach 语句 示例 。 
下 面 的 例子 示范 了 一 个 循环 ,这 个 循环 可 以 输出 给 定数 组 的 值 。 


<html> 
<body> 
<?php 
// 定 义 数组 
$arr=array("—", "=", "—"); 
//foreach 循环 遍历 
foreach ( $arr as $ value) 
{ 
echo "fÈ: " . $value. "<br />"; 
) 
> 
</body > 
</html> 


9.7 使 用 函数 使 代码 模块 化 
P 


函数 是 一 种 可 以 在 任何 被 需要 的 时 候 执行 的 代码 块 。 在 PHP 中 同样 可 以 自己 来 定义 
函数 。 通 过 自 定义 函数 可 以 使 程序 代码 结构 清晰 易 懂 。 通 过 这 种 模块 化 的 程序 结构 设计 ， 
可 以 很 大 程度 地 减少 开发 工作 量 ,从 而 提高 代码 编写 的 工作 效率 。 


1. 创建 函数 


PHP 提供 了 自 定义 函数 的 功能 ,定义 函数 的 格式 如 下 : 


function 函数 名 (参数 列表 ) 
{ 

函数 功能 ; 

} 
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PHP 中 的 自 定义 函数 需要 遵守 以 下 规范 。 

(1) 所 有 的 函数 都 使 用 关键 词 function() 来 开始 。 

(2) 函数 的 名 称 应 该 提示 出 它 的 功能 。 函 数 名 称 以 字母 或 下 划 线 开头 。 
(3) 开口 的 花 括 号 之 后 的 部 分 是 函数 的 代码 。 

(4) 插入 函数 代码 。 

(5) 函数 通过 关闭 花 插 号 来 结束 。 

【 例 9.22】 自 定义 函数 示例 。 

注意 : 函数 名 对 大 小 写 敏 感 。 


<html > 
<body> 
<?php 
// 定 义 函 数 
function writeMyName() 
( 

echo "jk ="; 
) 
?> 
</body> 
«/htnl» 


2. 使 用 函数 


创建 完 函 数 后 就 可 以 在 PHP 脚本 中 使 用 这 个 函数 了 。 
【 例 9.23】 使 用 函数 示例 。 


<html> 
<body> 
<?php 
// 定 义 函 数 
function writeMyName() 
{ 

echo "jk ="; 
) 
echo "大 家 好 !< br />"; 
echo "我 的 名 字 是 "; 
// 调 用 函数 
writeMyName(); 
echo ".«br />"; 
// 调 用 函数 
writeMyName(); 
echo "是 我 的 名 字 ."; 
?> 
</body> 
</html> 


以 上 代码 的 输出 如 下 : 
大 家 好 ! 
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我 的 名 字 是 张 三 。 
张 三 是 我 的 名 字 。 


3. 返回 值 


函数 声明 时 ,在 函数 代码 中 使 用 return 语句 可 以 结束 函数 的 运行 ,程序 返回 到 调用 该 
函数 的 下 一 条 语句 。 
【 例 9.24] return 语句 示例 。 


<html> 

<body> 

<?php 

// 定 义 函 数 支持 返回 值 

function add( $ x, $ y) 

{ 
$total = $x * $y; 
return $ total; 

) 

// 调 用 函数 

echo "1 + 16 = " . add(1,16); 

?> 

</body> 

</html > 


以 上 代码 的 输出 如 下 : 


1*16-7217 
小 结 


本 章 系统 地 介绍 了 PHP 语言 的 基础 语法 ,通过 这 一 章 的 学 习 , 可 以 对 PHP 语言 有 个 
概要 性 的 理解 。 事 实 上 ,PHP 在 语法 上 与 C++ 特别 相似 ,对 于 有 一 定 C 语言 学 习 基 础 的 读 
者 来 说 ,可 以 很 快 掌握 。 而且 PHP 语言 在 某 些 语法 特性 上 还 进行 了 简化 , 相 比 其 他 编程 语 
言 来 说 相对 简单 ,更 加 快速 灵活 ,这 也 是 它 的 优势 所 在 。 


习题 
1. 变量 如 何 定 义 ? 
2. PHP 中 变量 有 哪些 基本 数据 类 型 ? 
3. 计算 字符 串 长 度 用 到 哪个 函数 ? 
4. 定义 数组 用 到 哪个 函数 ? 
5. 定义 一 个 函数 ,用 于 比较 两 个 数 的 大 小 ,如 果 前 者 比 后 者 大 则 返回 1, 反 之 返回 0。 
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本 章 要 点 : 

* HTML 表单 ; 

。 动态 生成 表单 ; 

。 提交 和 接收 表单 数据 ; 
。 表单 数据 验证 ; 

。 通过 表单 上 传 文件 。 


在 本 章 中 ,将 学 习 如 何 通 过 PHP 来 获取 表单 中 的 用 户 输 入 并 执行 相应 的 处 理 。 
(10.1 HTML 表单 
u 


表单 是 Web 应 用 中 最 常用 的 组 件 , 由 “提交 ”按钮 以 及 其 他 相关 元 素 组 成 。 表 单 被 应 用 
在 各 个 领域 中 ,可 以 实现 注册 用 户 、 填 写 信 息 和 登录 、 查 询 等 功能 。 因 此 ,创建 和 处 理 表单 是 
PHP 开发 者 必须 要 掌握 的 一 项 关键 技术 。 

在 学 习 具 体 的 PHP 处 理 表单 的 技术 之 前 ,要 掌握 使 用 HTML 如 何 创建 表单 。 一 个 
HTML 表单 ,实际 上 是 由 一 系列 被 嵌入 到 Web 页 面 中 的 简单 HTML 标签 所 组 成 的 。 这 些 
元 素 包 括 : 文本 输入 框 复 选 框 , 单 选 框 和 下 拉 框 等 。 

所 有 的 Web d 2038 BERE A TE — form — / form d & n. 

【 例 10.1】 表单 标签 。 

< form action = "myscript. php" method = "post"> 


<! 一 表单 内 容 -- > 


</form> 
常用 的 HTML 表单 元 素 如 表 10. 1 所 示 。 
表 10.1 PHP 常用 表单 元 素 








表单 元 素 说 BB 
input type="checkbox" | 复 选 框 ,允许 用 户 选择 多 个 选择 项 
input type— "file" 文件 浏览 框 , 当 文 件 上 传 时 ,可 用 来 打开 一 个 模式 窗口 以 选择 文件 


input type="hidden" — | 隐藏 标签 , 它 不 会 在 用 户 浏览 的 页 面 界 面 上 出 现 , 当 用 户 填 写 资料 表单 和 跨 页 
之 间 传 值 时 ,可 以 使 用 该 标签 传递 一 些 隐 含 的 值 
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LEX 说 明 
input type="password" | 密码 文本 框 ,用 户 在 该 文本 框 输入 字符 时 将 被 替换 显示 为 * 号 ,但 是 密码 并 没 
有 加 密 , 只 是 被 * 替换 显示 ,通过 查看 HTML 源 代码 还 是 可 以 看 到 原始 值 内 容 
input type= "radio" 单 选项 ,用 于 设置 一 组 选择 项 ,用 户 只 能 选择 一 个 
input type— "reset" 清除 与 重 置 表 单 内 容 , 用 于 清除 表单 中 所 有 文本 框 的 内 容 , 而 且 使 选择 菜单 项 
恢复 到 初始 值 
input type— "submit" 表单 提交 按钮 











在 表单 标签 二 form 二 中 提供 了 以 下 两 个 内 置 属性 。 

CD action 属性 : 此 属性 告诉 浏览 器 将 用 户 输 入 的 表单 数据 提交 到 哪个 地 址 去 处 理 。 
这 个 地 址 必须 是 一 个 标准 的 URL 绝对 路 径 ( 例 如 http://www. example. com/myscript. 
php) 或 者 一 个 相对 路 径 ( 例 如 myscript. php./myscript. php 或 者 .. /scripts/myscript. 
Php)。 该 路 径 对 应 的 脚本 会 对 接收 到 的 数据 进行 下 一 步 的 处 理 。 

(2) method 属性 : 此 属性 告诉 浏览 器 以 何 种 方式 提交 数据 ,分 别 是 GET 和 POST 方 
式 , 如 果 没 有 设置 method 属性 或 该 属性 为 空 值 ,浏览 器 默认 method 的 值 为 POST 方 法 。 

GET 方式 是 在 访问 URL 时 ,使 用 浏览 器 地 址 栏 来 传递 值 ,这 种 方式 简单 直观 ,适合 发 
送 少 量 的 数据 ,但 缺点 是 访问 该 网 站 的 用 户 也 可 以 修改 URL 串 后 发 送 给 服务 器 ,如 果 程 序 
处 理 得 不 够 好 很 容易 出 错 , 而 且 GET 传递 的 字符 串 长 度 不 能 超过 250 个 字符 ,如 果 超 长 , 浏 
览 器 会 自动 截断 ,导致 数据 缺失 。 

而 POST 方式 则 是 随 HTTP 的 二 header 二 中 的 信息 一 起 发 送 表单 信息 ,用 户 不 能 随意 
修改 ,这 对 于 Web 应 用 程序 而 言 ,安全 性 要 好 得 多 ,并 且 POST 方式 也 能 够 支持 大 数据 量 用 
户 输入 数据 的 发 送 。 

使 用 POST 方式 提交 表单 ,理论 上 数据 的 大 小 无 上 限 。 但 在 实际 使 用 中 ,如 果 使 用 
PHP 进行 POST 提交 时 ,文件 大 小 会 受 PHP 配置 文件 (php. inid 限制, 默认 是 2MB。 可 以 
修改 php. ini 文件 中 的 post_max_size 参数 ,将 其 修改 为 自己 需要 的 大 小 ,但 由 于 HTTP 的 
特性 ,这 个 值 不 宜 设置 过 大 ,最 大 以 8MB 为 宜 。 

在 开发 中 需要 根据 实际 应 用 灵活 选择 GET 和 POST 来 提交 表单 数据 。 

【 例 10.2〗 HTML 表单 的 源 代码 示例 。 

<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 

"http://www. w3. org/TR/xhtml1/DTD/xhtml1 — strict. dtd"> 

<html xmlns = "http://www. w3. org/1999/xhtm1" xml:lang = "en" lang= "en"> 

<head> 

<title> 基 本 的 HTML 表单 </title> 

</head> 

<body> 

« hl» An HTML Form «/hl > 

< form action= "test. php" method = "get"> 

<div style= "width: 25em;"> 

< label for = "textField"> A text input field</label > 

< input type = "text" name = "textField" id= "textField" value="" /> 

< label for = "passwordField">A password field </label > 
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< input type = "password" name = "passwordField" id= "passwordField" 
value="" /> 

< label for = "checkboxField"> A checkbox field</label > 

< input type = "checkbox" name = "checkboxField" id= "checkboxField" 
value= "yes" /> 

< label for = "radioButtonFieldl"» A radio button field</label > 

< input type = "radio" name = "radioButtonField" id= "radioButtonFieldi" 
value = "radiol" /> 

< label for = "radioButtonField2"» Another radio button</label > 

< input type = "radio" name = "radioButtonField" id= "radioButtonField2" 
value = "radio2" /> 

< label for = "submitButton"» A submit button</label > 

< input type = "submit" name = "submitButton" id = "submitButton" 
value = "Submit Form" /> 

< label for = "resetButton"> A reset button</label > 

< input type = "reset" name = "resetButton" id= "resetButton" 

value = "Reset Form" /> 

< label for = "fileSelectField">A file select field</label > 

< input type = "file" name = "fileSelectField" id= "fileSelectField" 
value ="" /> 

< label for = "hiddenField"> A hidden field</label > 

< input type = "hidden" name = "hiddenField" id= "hiddenField" value= "" /> 
< label for = "imageField"» An image field</label > 

< input type = "image" name = "imageField" id= "imageField" value = "" 
src = "asterisk. gif" width= "23" height = "23" /> 

< label for = "pushButton"> A push button </label > 

< input type = "button" name = "pushButton" id= "pushButton" 

value = "Click Me" /> 

< label for = "pullDownMenu"» A pull — down menu </label > 

<select name = "pullDownMenu" id= "pullDownMenu" size ="1"> 
<option value = "optionl"» Option 1 </option> 

<option value = "option2"» Option 2 </option> 

< option value = "option3"> Option 3 </option> 

</select > 

< label for = "listBox"» A list box</label > 

<select name = "listBox" id= "listBox" size ="3"> 

<option value = "optionl"» Option 1 </option> 

<option value = "option2"> Option 2 </option> 

<option value = "option3"> Option 3 </option> 

</select > 

< label for = "multiListBox"> A multi- select list box</label> 
<select name = "multiListBox" id= "multiListBox" size ="3" 
multiple = "multiple"> 

<option value = "optionl"» Option 1 </option> 

<option value = "option2"> Option 2 </option> 

<option value = "option3"> Option 3 </option> 

</select > 

< label for = "textAreaField"> A text area field</label > 

< textarea name = "textAreaField" id= "textAreaField" rows = "4" 
cols = "50"></textarea > 

< input type = "submit" /> 
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</div> 

</form> 

</body> 

</html > 

上 面 的 HTML 页 面 实例 包含 一 系列 输入 框 和 一 个 “提交 ”按钮 。 当 用 户 填写 该 表单 并 
单 击 “提交 ”按钮 时 ,表单 的 数据 会 被 送 往 test. php 这 个 文件 。 将 源 代码 保存 为 一 份 HTML 
文件 并 使 用 浏览 器 打开 ,就 可 以 看 到 结果 ,最 终结 果 如 图 10. 1 所 示 。 








© > © D fie///E/yongquan/Desktop/testhtml 2z 
Eea COMHEMWOUNL. ATEZ ERERA @ Apache Fels Web. A Temm G] ARANTES = 天 和 上 和 SEE30 MIO MrR. E ine -Makek We 4d 
基本 的 HTML 表 单 


A text input field 
A password field 

A pman Sala 
A checkbor field 
m 

A radio button field 


Another radio button 
3 





A reset button 
e 


A file select field 











A milti-velect list box 
T 








图 10.1 基本 HTML 表单 显示 效果 


(10,2 动态 生成 表单 


在 很 多 场景 中 ,表单 并 不 是 固定 不 变 的 ,而 是 需要 根据 特定 情况 动态 修改 表单 中 的 
HTML 元 素 ,例如 ,购买 火车 票 时 进行 查询 的 表单 ,这 就 是 一 种 需要 动态 更 新 内 容 的 表单 ， 
它 需 要 从 数据 库 中 查询 出 有 效 的 车 次 等 信息 供用 户 进行 选择 。 如 果 有 一 个 动态 生成 表单 及 
其 验证 脚本 的 程序 ,就 可 以 大 大 减少 制作 这 些 表单 的 工作 量 。PHP 作为 一 种 动态 语言 ,可 
以 很 好 地 实现 这 一 需求 。 

一 般 来 说 ,可 以 通过 以 下 两 种 方式 来 动态 生成 表单 。 

(1) 直接 输出 : 在 PHP 代码 中 通过 调用 echo 或 者 print 方法 将 对 应 Web 表单 元 素 的 
HTML 源 代 码 支持 输出 。 

(2) RAH: 可 以 通过 二 ? php…? 二 标签 的 方式 将 HTML 源 代码 嵌入 到 PHP 片段 中 。 

当然 ,也 可 以 混合 使 用 上 述 两 种 方式 来 生成 表单 。 

【 例 10.3】 RAT PHP 脚本 的 动态 表单 页 面 示例 。 


<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1. 0 Strict//EN" 
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"http://www. w3. org/TR/xhtml1/DTD/xhtml1 — strict. dtd"> 
<html xmlns = "http://www. w3. org/1999/xhtml" xml:lang = "en" lang = "en"> 
<head> 
<title> 注 册 表 单 </title> 
< link rel = "stylesheet" type = "text/css" href = "common. css" /> 
< style type = "text/css"> 
.error { background: #d33; color: white; padding: 0. 2em; } 
</style> 
</head> 
< body> 
<?php 
if ( isset( $ POST["submitButton"] ) ) { 
processForm(); 
} else { 
displayForm( array() ); 
} 
function validateField( $ fieldName, $ missingFields ) { 
if ( in array( $ fieldName, $ missingFields ) ) { 


echo ' class = "error"'; 


) 
function setValue( $ fieldName ) { 
if ( isset( $ POST[ $ fieldName] ) ) { 
echo $ POST[ $ fieldName]; 


) 
function setChecked( $ fieldName, $ fieldValue ) ( 
if ( isset( $ POST[ $ fieldName] ) and $ POST[ $ fieldName] = 
echo ' checked - "checked" '; 





$ fieldValue ) ( 


) 
function setSelected( $ fieldName, $ fieldValue ) ( 
if ( isset( $ POST[ $ fieldName] ) and $ POST[ $ fieldName] == $ fieldValue ) { 
echo ' selected = "selected" '; 


) 
// 自 定义 表单 处 理 函 数 
function processForm() { 
$ requiredFields = array( "firstName", "lastName", "passwordl", 
"password2", "gender" ); 
$ missingFields = array(); 
foreach ( $ requiredFields as $ requiredField ) { 
if (!isset( $ POST[ $ requiredField] ) or ! $ _POST[ $ requiredField] ) { 
$missingFields[] = $ requiredField; 


} 
if ( $missingFields ) ( 
displayForm( $ missingFields ); 
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} else { 
displayThanks(); 


) 
function displayForm( $ missingFields ) ( 
?> 
< hl > 注册 表单 </hl > 
<?php if ( $missingFields ) { ?> 
« p class = "error"> 发 现 错误 </p> 
<?php } else ( ?> 
<p> 感 谢 注册 .</p> 
<?php } ?> 
< form action = "registration. php" method = "post"> 
<div style= "width: 30em;"> 
< label for = "firstName"<?php validateField( "firstName", 
$ missingFields ) ?>> 姓 *</label> 
< input type = "text" name = "firstName" id= "firstName" 
value = "<?php setValue( "firstName" ) ?>" /> 
< label for = "lastName"<?php validateField( "lastName", 
$missingFields ) ?>> 名 * «/label» 
< input type = "text" name = "lastName" id= "lastName" value = 
"<?php setValue( "lastName" ) ?>" /> 
< label for = "password1"<?php if ( $ missingFields ) echo 
'class = "error"' ?>> 输 入 密码 * «/label» 
< input type = "password" name = "passwordl" id= "passwordl" value="" /> 
< label for = "password2"<?php if ( $ missingFields ) echo 
"F"<?php setChecked( "gender", "F" )?» /> 
< label for = "favoriteWidget"> 最 喜欢 的 栏目 ? * «/label» 
< select name = "widgetl" id= "favoriteWidget" size- "1"> 
<option value = "superWidget"<?php setSelected( "favoriteWidget", 
"widgetl" ) ?>> 栏 目 1 </option> 
< option value = "widget2"<?php setSelected( "favoriteWidget", 
"widget2" ) ?>># H 2 «/option» 
<option value = "widget3"<?php setSelected( "favoriteWidget", 
"widget3" ) ?>> 栏 目 3 «/option» 
</select > 
< label for = "newsletter"> 是 否 愿意 接收 电子 邮件 ? 
</label > 
< input type = "checkbox" name = "newsletter" id= "newsletter" value = "yes" 
<?php setChecked( "newsletter", "yes" ) ?> 人 > 
< label for = "comments">#ti?</label > 
< textarea name = "comments" id= "comments" rows = "4" cols = "50"»«?php 
setValue( "comments" ) ?></textarea> 
<div style- "clear: both;"> 
< input type = "submit" name = "submitButton" id= "submitButton" value = 
"提交 ”/> 


< input type = "reset" name = "resetButton" id= "resetButton" 





value = "Reset Form" style = "margin- right: 20px;" /> 
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</div> 
</div> 
</form> 
<?php 
} 
function displayThanks() { 
?> 
< hl > 谢谢 </hl > 
<p> 您 的 申请 已 收 到 .</p> 
«?php 
) 
?> 
</body> 
</html > 


可 以 看 到 ,动态 生成 表单 本 质 上 是 通过 PHP 代码 对 HTML 代码 进行 拼接 处 理 ,最 终 
生成 用 户 看 到 的 HTML 表单 的 过 程 。 


(10,3 提交 和 接收 表单 数据 


用 户 在 表单 中 输入 数据 后 ,只 需 单 击 “ 提 交 ” 按 钮 ,就 可 以 将 信息 提交 到 服务 器 端 。 此 
时 ,就 可 以 通过 PHP 脚本 来 对 用 户 提交 的 数据 进行 处 理 。 在 PHP 中 人 处 理 表单 提交 的 数据 
非常 简单 , 它 能 够 自动 地 将 由 客户 端 表单 发 送 的 数据 赋值 给 相应 变量 ,从 而 极 大 地 简化 了 整 
个 表单 的 处 理 过 程 。 

根据 表单 提交 数据 所 使 用 的 方法 (method) 不 同 , 需 要 通过 不 同 的 变量 获取 内 容 。 
如 果 使 用 了 GET 方法 ,那么 表单 中 的 信息 将 被 储存 到 全 局 变量 $ GET 中 ,如 果 使 用 
T POST 方 法, 则 相关 信息 会 被 存储 到 全 局 变量 $ POST 中 。 如 果 并 不 关心 请 求 数据 
的 来 源 , 也 可 以 用 全 局 变量 $_REQUEST, 它 包含 所 有 GET, POST, COOKIE 和 FILE 
的 数据 。 

上 述 三 个 全 局 变量 都 是 以 Key-Value 数组 的 形式 提供 ,一 般 将 存放 用 户 输入 内 容 的 
HTML 表单 控件 的 编号 作为 索引 。 

例 10. 4 和 例 10. 5 是 一 个 简单 的 用 户 注册 的 示例 ,这 段 脚 本 将 获取 用 户 输入 的 信息 并 
将 其 显示 在 一 个 结果 页 面 中 。 这 个 例子 由 两 部 分 组 成 ,registration. html 供用 户 输入 注册 
信息 并 将 相关 数据 提交 给 服务 器 ,process. php 则 负责 接收 数据 并 将 其 格式 化 后 显示 给 
Hm. 

【 例 10.4] registration. html 页 面 代码 。 





«!DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Strict//EN" 

"http://www. w3. org/ TR/xhtm11/DTD/xhtm11 — strict. dtd"> 

< html xmlns = "http://www. w3. 0rg/1999/xhtml" xml:lang = "en" lang = "en" 
<head> 

«title» Membership Form</title>< link rel = "stylesheet" type = "text/ 


css" href = "common. css" /> 
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</head> 

<body> 

<hl > 注册 页 面 </hl > 

<p> 请 输入 以 下 信息 完成 注册 </p> 


< form action = 





process registration. php" method = "post"> 
<div style= "width: 30em;"> 
< label for = "firstName">E</label > 
< input type = "text" name = "firstName" id= "firstName" value = "" /> 
< label for = "lastName">#%</label > 
< input type = "text" name = "lastName" id= "lastName" value - "" /> 
< label for = "password1"> 密 码 </label > 
< input type = "password" name = "passwordl" id= "passwordl" value - "" /> 
< label for = "password2"> 重 新 输入 密码 </label > 
< input type = "password" name = "password2" id = "password2" value = "" /> 
< label for = "genderMale"> 您 的 性 别 ...</label> 
< input type = "radio" name = "gender" id = "genderMale" value = "M" /> 
< label for = "genderFemale">...or female?</label > 
< input type =" 
< label for = "favoriteWidget"> 你 的 爱好 ?</label > 
< select name = "favoriteWidget" id= "favoriteWidget" size="1"> 
< option value = "superWidget"> 游 泳 </option> 
< option value = "megaWidget"> 旅 游 </option> 
wonderWidget"> 看 书 </option> 








radio" name = "gender" id = "genderFemale" value = "F" /> 





<option value = 
</select > 
< label for = "newsletter"> 是 否 愿意 接收 电子 邮件 推广 信息 ?</label > 
< input type = "checkbox" name = "newsletter" id = "newsletter" value= "yes" /> 
< label for = "comments"> 其 他 备注 ?</label> 
< textarea name = "comments" id- "comments" rows = "4" 
cols = "50"></textarea > 
<div style= "clear: both;"> 
< input type = "submit" name = "submitButton" id = "submitButton"value =" Send Details" /> 
< input type = "reset" name = "resetButton" id = "resetButton" 
value = "Reset Form" style = "margin- right: 20px;" /> 
</div> 
</div> 
</form> 
</body> 
</html> 


【 例 10.5] process. php 页 面 代码 。 


«!DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Strict//EN" 

"http://www. w3. org/TR/xhtm11/DTD/xhtmll - strict. dtd"> 

<html xmlns = "http://www. w3. org/1999/xhtml" xml:lang = "en" lang = "en"> 
<head> 

<title> 注 册 成 功 </title> 
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< link rel = "stylesheet" type = "text/css" href = "common. css" /> 


</head> 
< body> 
«hi > 谢谢 </hl > 


<p> 注 册 成 功 . 注册 信息 如 下 :</p> 


<dl> 


<dt> 姓 </dt ><dd><?php echo $ _POST[ "firstName" ]?></dd> 
«dt»44«/dt»«dd»«?php echo $ _POST[" lastName" ]?></dd> 
< dt> 密 码 </dt >< dd><?php echo $ POST["passwordl"]?»«/dd» 
<dt> 性 别 </dt >< dd><?php echo $_POST["gender"]?></dd> 
< 三 > 爱好 </dt>< dd><?php echo $ POST["favoriteWidget" ]?» «/dd » 
<dt> 是 否 愿意 注册 电子 邮件 推广 信息 ?</dt >< dd ><?php echo 

$ _POST[ "newsletter"]?></dd> 
<dt> 备 注 </dt >< dd><?php echo $ _POST[ "comments" ]?></dd> 


</dl> 
</body> 
</html > 


该 表单 包括 常用 表单 元 素 : 单行 文本 框 、 多 行文 本 框 , 单 选项 (radio)、 多 选项 
(checkbox) ,以 及 多 选 菜单 。 下 面 进行 详细 的 说 明 。 
(1) maxlength 是 与 密码 文本 框 关联 的 属性 , 它 限制 用 户 输入 密码 的 最 大 长 度 为 10 个 


(2) favoriteWidget 列表 框 是 列表 菜单 , 它 由 一 组 选项 组 成 。 通 过 selected 属性 来 标记 


哪个 选项 被 选中 了 。 


(3) comments 文本 框 中 的 内 容 , 按 照 rows 和 cols 显示 文字 、 行 和 列 宽 。 

(4) newsletter 是 一 个 复 选 按钮 (checkbox) ,和 单 选项 一 样 ,所 有 多 选项 成 员 也 需 有 同 
名 的 属性 , 且 属性 名 称 需要 添加 括号 *[]”, 这 样 就 把 多 选项 的 值 以 数组 形式 发 送 给 PHP. 

(5) checked 标签 是 指 单 选 项 和 多 选项 中 的 某 个 值 , 默 认 已 经 被 选择 。 

运行 的 结果 如 图 10.2 和 图 10. 3 所 示 。 





» | Dt 


注册 页 面 


请 输入 以 下 信息 完成 注册 


Em | D Membership Form x [+ 





是 否 原 章 接受 电子 邮件 推广 信息 ? 回 


其 他 备注 ? | 
(mx) (aa) 











e 








图 10.2 表单 示例 运行 效果 
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游泳 
是 否 原著 注册 电子 邮件 推广 信息 ? 
yes 


备注 
BARE 











图 10.3 表单 接收 数据 效果 


(10.4 表单 数据 验证 


验证 表单 数据 是 Web 应 用 程序 最 重要 的 部 分 之 一 ,在 开发 网 站 应 用 时 ,如 果 不 进行 验 
证 ,各 种 奇怪 的 错误 或 就 会 出 现在 程序 员 最 意 想不到 的 地 方 。 通 常 为 了 避免 这 种 情况 ,开发 
者 会 给 表单 加 一 个 验证 的 过 程 ,在 表单 数据 提交 到 服务 器 之 前 或 者 服务 器 之 后 对 用 户 填 写 
的 数据 (信息 的 长 度 \ 格 式 、 内 容 等 ) 进 行 验证 ,车 遇 到 错误 的 填写 则 终止 处 理 并 返回 要 求 用 
户 进行 更 正 。 


10.4.1 表单 数据 验证 方式 


表单 数据 的 验证 分 为 两 种 : 服务 器 端 校 验 和 客户 端 校 验 。 客 户 端 校 验 实 际 上 就 是 包含 
在 已 下 载 的 页 面 中 的 一 段 JS 脚本 , 当 用 户 提交 表单 时 ,通过 运行 本 地 Script 来 进行 验证 , 客 
户 端的 验证 速度 很 快 ,并 且 可 以 减轻 服务 器 的 负载 。 而 服务 器 端的 验证 则 是 将 页 面 提交 到 
服务 器 处 理 , 服 务 器 上 的 另 一 个 PHP 页 面 先 执行 对 表单 的 验证 ,然后 再 返回 结果 到 客 
户 端 。 

如 果 表 单 访问 的 是 数据 库 ,就 非常 有 必要 采用 服务 器 端的 验证 。 一 般 服务 器 端 验 证 
页 面 会 将 表单 传 给 它 自己 ,而 不 是 跳 转 到 不 同 的 页 面 。 这 样 用 户 就 可 以 在 同一 张 表 单 页 
面 得 到 错误 信息 ,用户 也 就 更 容易 发 现 错误 了 。 服 务 器 端 校 验 的 缺点 是 每 一 次 验证 都 要 
经 过 服务 器 ,消耗 时 间 较 长 ,但 对 于 关键 业务 逻辑 必须 要 通过 服务 器 段 验证 来 保证 数据 
安全 性 。 

在 本 节 中 主要 介绍 如 何 使 用 PHP 在 服务 器 端 进行 输入 验证 。 比 如 ,在 用 户 注册 时 ,要 
求 用 户 的 输入 必须 是 中 文 ( 英 文 或 数字 ); 要 求 用 户 的 输入 必须 是 有 效 的 邮件 地 址 ; 对 用 户 
输入 的 数据 进行 各 种 不 同 的 限制 ; 限制 用 户 输入 的 数据 量 等 。 

根据 不 同 的 应 用 场景 ,需要 进行 一 些 特殊 的 校 验 。 针 对 这 些 需 要 进行 校 验 的 地 方 ,可 以 
采取 的 方法 主要 包括 以 下 几 种 。 
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(1) 使 用 htmlspecialchars() ph BOK HTML 特殊 字符 进行 过 滤 ; 
(2) 使 用 函数 trim() 去 除数 据 的 前 后 空格 ; 

(3) 使 用 函数 strlen() 判 断 数据 的 长 度 ; 

(4) 使 用 函数 is_numeric() 判 断 数据 是 否 纯 数字 ; 

(5) 使 用 正则 表达 式 来 验证 数据 是 否 满足 特定 规则 。 


10.4.2 正则 表达 式 验证 表单 
正则 表达 式 是 程序 开发 中 一 个 重要 的 元 素 , 它 可 以 用 来 描述 或 匹配 文本 的 字符 串 , 如 特 


定 的 字符 、 词 或 算式 等 。 虽 然 编写 一 个 特定 的 正则 表达 式 比 较 复杂 和 费时 ,但 其 执行 效率 却 
很 高 ,尤其 适合 用 于 进行 快速 数据 验证 。 下 面 的 例子 列 出 了 常见 的 用 于 数据 验证 的 几 种 正 
则 表达 式 。 


[B] 10.6】 验证 E-mail 地 址 。 


<?php 

if (!isset( $ _POST['send']) || $ POST['send']!- ' 提 交 ') ( 

header( 'Location:Demol.php'); 

exit; 

) 

if (preg natch( '/([ Ww. ]{2,255})@ ([\w\ - ]{1,255}). ([a- z](2, 4))/', $ _POST[ 'email'])) ( 
echo ' 电 子 邮 件 合法 '; 

) else { 

echo ' 电 子 邮 件 不 合法 '; 

} 


?> 
【 例 10.7】 验证 用 户 名 。 


<?php 

$username = "user namel2"; 

if (preg match('/^[a- zVd ](5,20) $ /i', $ username)) { 
echo "用 户 名 合法 ."; 

} else { 
echo "用 户 名 不 合法 "; 

) 


?> 


这 是 一 个 用 于 验证 用 户 名 的 实例 ,其 中 包括 字母 数字 (A 一 Z,a 一 z,0 一 9)、 下 划 线 以 及 


最 低 5 个 字符 ,最 大 20 个 字符 的 限 限制 。 同 时 ,也 可 以 根据 需要 ,对 最 小 值 和 最 大 值 做 合理 
的 修改 。 


【 例 10.8】 验证 电话 号 码 。 


<?php 

$ phone = "(021)423- 2323"; 

if (preg match( '/\(?\d{3}\)?[ - Vs. ]?\d{3}[ —\s. ]\d{4}/x', $ phone)) { 
echo "电话 号 码 合法 "; 

} else ( 
echo "电话 号 码 不 合法 "; 
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} 


?> 
【 例 10.9】 验证 IP 地 址 。 


<?php 
$IP = "198.168.1.78"; 
if (preg match( '/^(([1- 9]?[0 - 9]]1[0 - 9](2)|2[0 - 4][0 - 9]]25[0 - 51) .) (3) ([1 - 9]?[0 - 9]| 
1[0-9](2)]2[0- 4][0-9]]25[0 -5]) $ /', $1) ( 
echo " IP 地 址 合法 ."; 
} else { 
echo "IP 地 址 不 合法 "; 


}?> 
【 例 10.10] 验证 生日 。 


<?php 
$ birthday = "2008 - 06 - 19"; 
if(!preg_match("/*(19|20)\d{2} — (0?Xd|1[012]) - (0?\d|[12]\d|3[01]) $ /", $ birthday)) 
{ 
$ erro_msg. = $ st_birthday. "日 期 格式 错误 ! 正 确 日 期 格式 为 yyyy 一 mm 一 dd!"; 
echo $ erro_msg; 
} 
Else 
{ 
echo "日 期 正确 " 
} 


?> 


验证 生日 是 否 为 合理 格式 ,如 果 不 正确 提示 为 yyyy-mm-dd 的 格式 类 型 。 
【 例 10.11) 验证 邮政 编码 。 


<?php 

$ zipcode = "12345 - 5434"; 

if (preg_match("/*([0-9]{5})(-[0-9]{4})?$ /i", $ zipcode) ) { 
echo "邮政 编码 合法 "; 

} else { 
echo" 邮 政 编码 不 合法 "; 

) 


?> 
【 例 10.12) 验证 信用 卡号 。 


<?php 
$cc = "378282246310005"; 
if (preg match('/^(?:4[0 — 9](12) (?:[0 - 9](3))?|5[1— 5][0 - 9] (14) |6011[0 — 9] {12} |3(?:0[0 — 
5]|[68][0-9])[0-9]{11}|3[47][0-9]{13}) $ /', $cc)) ( 
echo "信用 卡号 合法 "; 
) eise( 
echo "信用 卡号 不 合法 "; 
} 


?> 
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【 例 10.13] 验证 域名 。 


<?php 
$url = "http://www. nuc. edu/" ; 
if (preg match('/^(http|https|ftp):V/M([A-20-9][A- ZO -9 -]*(?:V.[A- 20-9][A- Z0- 9 
2-7]*)*):20d*)?V?/i', $Surl)) ( 
echo "域名 合法 "; 
} else { 
echo "域名 不 合法 "; 
} 


?> 
【 例 10.14】 UTFS 下 的 中 文 验证 。 


<?php 

if (preg match("/^[".chr(0xal)." —".chr(Oxff)."] * $ /", $ st_name) { 
print(" 该 字符 串 全 部 是 中 文 "); 

) eise( 
print(" 该 字符 串 不 全 部 是 中 文 "); 

} 


?> 
【 例 10.15】 GB2312 下 中 文 的 验证 。 


<?php 

$strl = "RE"; 

$ str = "php 编程 "; 

if (preg_match("/*[\x{4e00} - \x{9fa5}] + $ /u", $ str)) { 
print(" 该 字符 串 全 部 是 中 文 "); 

) eise( 
print(" 该 字符 串 不 全 部 是 中 文 "); 

) 


?> 


10.4.3 过 滤 式 扩展 验证 表单 
除了 使 用 正则 表达 式 进行 输入 验证 外 ,PHP 还 提供 了 过 滤器 扩展 的 方式 来 进行 输入 验 


证 ,PHP 过 滤器 主要 用 于 验证 和 过 滤 来 自 非 安全 来 源 的 数据 ,这 种 方式 相 比 正则 表达 式 更 


简单 





,使 得 数据 过 滤 更 轻松 快捷 。 

下 面 就 是 PHP 提供 的 用 于 过 滤 变 量 的 过 滤器 函数 。 

(1) filter_var(): 通过 一 个 指定 的 过 滤器 来 过 滤 单 一 的 变量 。 

(2) filter_var_array() : 通过 相同 的 或 不 同 的 过 滤器 来 过 滤 多 个 变量 。 

(3) filter input: 获取 一 个 输入 变量 ,并 对 它 进 行 过 滤 。 

(4) filter input array: 获取 多 个 输入 变量 ,并 通过 相同 的 或 不 同 的 过 滤器 对 它们 进行 


(61 10.16) 使 用 filter varO 函数 验证 一 个 整数 。 


<?php 
$int = 123; 
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if(!filter var( $ int, FILTER VALIDATE INT)) 
{ 
echo("Integer is not valid"); 


} 


else 


echo("Integer is valid"); 

} 

?> 

上 面 的 代码 使 用 了 “FILTER_VALIDATE_INT” 过 滤器 来 过 滤 变 量 。 由 于 这 个 整数 是 
合法 的 ,因此 代码 的 输出 是 : "Integer is valid", 

假如 尝试 使 用 一 个 非 整数 的 变量 , 则 输出 是 :“Integer is not valid", 


1. Validating 和 Sanitizing 


有 两 种 过 滤器 ,Validating 过 滤器 和 Sanitizing 过 滤器 。Validating 过 滤器 用 于 验证 用 
户 输入 ,判断 其 是 否 符合 严格 的 格式 规则 (比如 URL 或 E-mail 验证 ) ,如 果 符 合 则 返回 预期 
的 类 型 ,否则 返回 FALSE, Sanitizing 过 滤器 则 用 于 允许 或 禁止 字符 串 中 指定 的 字符 , 它 没 
有 数据 格式 规则 ,并 且 始 终 返回 字符 串 。 


2. 选项 和 标志 


选项 和 标志 用 于 向 指定 的 过 滤器 添加 额外 的 过 滤 选 项 。 不 同 的 过 滤器 有 不 同 的 选项 和 
标志 。 在 PHP 官方 网 站 提供 的 PHP Filter 参考 手册 中 可 以 查询 到 完整 的 函数 和 过 滤器 列 
表 以 及 每 个 过 滤器 的 可 用 选项 和 标志 。 

【 例 10.17】 使 用 filter_var() 和 min_range 以 及 max_range 选项 验证 一 个 整数 。 


<?php 
$ var = 300; 
$ int options = array( 
"options" =>array 
( 
"min range" =>0, 
"max range" = > 256 
) 
); 
if(!filter_var( $ var, FILTER VALIDATE INT, $ int options)) 
{ 
echo( "不 合法 的 数字 "); 
} 
else 
{ 
echo( "合法 的 数字 "); 
} 


?> 


就 像 上 面 的 代码 一 样 ,选项 必须 放 入 一 个 名 为 “options” 的 相关 数组 中 。 如 果 使 用 标 
志 , 则 不 需 在 数组 内 。 由 于 整数 是 “300”, 它 不 在 指定 的 范围 内 ,以 上 代码 的 输出 将 是 “不 合 
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法 的 数字 ”。 

接 下 来 ,可 以 通过 使 用 过 滤器 来 验证 来 自 表单 的 输入 。 需 要 做 的 第 一 件 事情 是 确认 是 
否 存 在 之 前 正在 查找 的 输入 数据 ,然后 用 filter input O 函数 过 滤 输 入 的 数据 。 

【 例 10.18】 输入 变量 email 被 传 到 PHP 页 面 。 


<?php 
if(!filter has var(INPUT GET, "email")) 
{ 
echo(" i£ fj email 字段 "); 
) 
else 
{ 
if (!filter input(INPUT GET, "email", FILTER VALIDATE EMAIL)) 
{ 
echo "E- Mail 地 址 错误 "; 
Į 
else 
{ 
echo "E-Mail 地 址 正确 "; 
} 
} 


7> 


例 10. 18 先 检测 其 是 否 存在 GET 类 型 的 email 输入 变量 ,如 果 存 在 输入 变量 ,再 检测 
它 是 否 是 有 效 的 邮件 地 址 ,最 后 输出 验证 结果 。 

接 下 来 ,可 以 使 用 过 滤器 清理 一 下 从 表单 传 来 的 URL. 

首先 ,要 确认 是 否 存在 之 前 正在 查找 的 输入 数据 ,然后 ,可 以 用 filter_input() 函 数 来 净 
化 输入 数据 。 

【 例 10.19】 输入 变量 url 被 传 到 PHP 页 面 。 

<?php 

if(!filter has var(INPUT POST, "url")) 

{ 

echo( "url 字段 不 存在 "); 
} 


else 
{ 
$url = filter input(INPUT POST, "url", FILTER SANITIZE URL); 

) 

?> 

例 10. 19 先 检测 是 否 存 在 POST 类 型 的 url 输入 变量 ,如 果 存 在 此 输入 变量 ,对 其 进行 
净化 (删除 非法 字符 ) ,并 将 其 存储 在 S url 变量 中 。 假 如 输入 变量 类 似 这 样 :“http:// 
www. nuc£ $ %uc. edu. cn/”, 则 净化 后 的 $url 变量 应 该 是 这 样 的 :“http://www. nuc. 
edu. cn/”。 

在 一 个 表单 中 ,通常 会 存在 多 个 输入 字段 。 为 了 避免 对 filter_var 或 filter input 重复 
调用 ,可 以 使 用 filter_var_array 或 filter input array PAX. 
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【 例 10.20】 使 用 filter_input_array() 函 数 过 滤 三 个 GET 变量 。 


<?php 
$filters = array 
( 
"name" => array 
( 
"filter" => FILTER SANITIZE STRING 
)» 
"age" -» array 
( 
"filter" => FILTER VALIDATE INT, 
"options" = > array 
( 
"min range" =>1, 
"max range" -» 120 
) 
)» 
"email" -» FILTER VALIDATE EMAIL, 
i 
$result = filter_input_array(INPUT_GET, $ filters); 
if (! $ result["age"]) 
{ 
echo( "年 龄 必须 是 大 于 1 小 于 120 的 数字 .<br />"); 
) 
elseif(! $ result["email"]) 
{ 
echo("E - Mail 地 址 不 合法 <br />"); 
) 
else 
( 
echo( "用 户 输出 错误 "); 
) 


例 10. 20 有 三 个 通过 GET 方法 传送 的 输入 变量 Cname， age 和 email) ,可 以 设置 一 个 
数组 ,其 中 包含 输入 变量 的 名 称 , 以 及 用 于 指定 的 输入 变量 的 过 滤器 ,然后 调用 filter input 
_array 图 数 , 参 数 包 括 GET 输入 变量 及 刚才 设置 的 数组 ,接着 检测 $ result 变量 中 的 age 
和 email 变量 是 否 有 非法 的 输入 ,如 果 存 在 非法 输入 ,就 提示 用 户 。 

需要 注意 的 是 ,filter_input_array() 函 数 的 第 二 个 参数 可 以 是 数组 或 单一 过 滤器 的 ID. 
如 果 该 参数 是 单一 过 滤器 的 ID, 那 么 这 个 指定 的 过 滤器 会 过 滤 输 入 数组 中 所 有 的 值 。 而 如 
果 该 参数 是 一 个 数组 ,那么 此 数组 必须 遵循 下 面 的 规则 。 

CD 必须 是 一 个 关联 数组 ,其 中 包含 的 输入 变量 是 数组 的 键 (比如 age 输入 变量 ) 。 

(2) 此 数组 的 值 必须 是 过 滤器 的 ID ,或 者 是 规定 了 过 滤器 .标志 以 及 选项 的 数组 。 

很 多 时 候 在 进行 一 些 特 殊 的 验证 时 需要 调用 自 定义 函数 ,此 时 可 以 使 用 FILTER 
CALLBACK 过 滤器 ,可 以 将 自 定义 的 函数 作为 一 个 过 滤器 来 使 用 。 这 样 , 程 序 就 拥有 了 数 
据 过 滤 的 完全 控制 权 。 这 时 还 可 以 创建 自己 的 自 定义 函数 ,也 可 以 使 用 已 有 的 PHP 函数 。 
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设置 调用 函数 的 方式 与 设置 选项 相同 ,只 需要 调用 filter var O PR S. 4% FILTER _ 
CALLBACK 过 滤器 以 及 包含 函数 的 数组 当 作 参数 传人 即 可 。 

【 例 10.21】 使 用 一 个 自 定义 的 函数 把 所 有 “_” 转 换 为 空格 。 

<?php 

// 定 义 自 定义 函数 

function convertSpace( $ string) 

{ 

return str_replace("_", "", $ string); 

} 

$string = "A 中 f"; 

// 输 出 结果 


echo filter var( $ string, FILTER CALLBACK, array("options" = >"convertSpace") ) ; 
?> 


以 上 代码 的 结果 如 下 : 
左 中 右 


fo.5 通过 表单 上 传 文件 


在 学 习 前 面 章节 的 时 候 了 解 到 PHP 通过 POST 方法 可 以 提交 表单 数据 ,事实 上 ， 
POST 方法 不 仅 可 以 提交 字符 串 类 型 的 表单 数据 ,还 可 以 传递 二 进 制 数据 ,可 以 利用 PHP 
的 这 一 功能 ,将 文件 上 传 到 服务 器 。 


1. 创建 一 个 文件 上 传 表单 
【 例 10.22】 创建 一 个 上 传 文件 的 HTML 表单 。 


<html> 

<body> 

< form action = "upload file. php" method = "post"enctype = "multipart/form— data"> 
< label for = "file"> 文 件 名 :</label > 

< input type = "file" name = "file" id= "file" /> 

<br /> 

< input type = "submit" name = "submit" value = "提交 " /> 

</form> 

«/body » 

</html> 


在 例 10. 22 中 ,有 关 此 表单 的 信息 如 下 。 

A) form RÆ H enctype 属性 规定 了 在 提交 表单 时 要 使 用 哪 种 内 容 类 型 。 在 表单 
需要 二 进 制 数据 时 ,比如 文件 内 容 ,请 使 用 multipart/form-data. 

(2) <input> PREH type= "file" 属 性 规定 了 应 该 把 输入 作为 文件 来 处 理 。 举 例 来 说 ， 
当 在 浏览 器 中 预览 时 ,会 看 到 输入 框 旁边 有 一 个 “浏览 ?按钮 。 

注意 : 允许 用 户 上 传 文件 会 存在 一 些 安全 风险 ,例如 ,非法 用 户 可 能 会 上 传 PHP 木马 
程序 ,因此 只 能 允许 可 信 的 用 户 执行 文件 上 传 操作 。 
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2. 创建 上 传 脚本 
KB 10.23] 上 传 文件 。 
<?php 


// 接 收 从 表单 中 POST 过 来 的 文件 数据 并 处 理 
if ($_FILES["file"]["error"] > 0) 
{ 
echo "错误 : ". $ FILES["file"]["error"] . "<br />"; 
H 


else 
{ 
echo "上 传 : ". $_FILES["file"]["name"] . "<br />"; 
echo "类 型 : " $ FILES["file"]["type"] . "<br />"; 
echo "大 小 : " . ($ FILES["file"]["size"] / 1024) . " Kb< br />"; 
echo "存储 为 : " . $ FILES["file"]["tmp name"]; 
) 


?> 

通过 使 用 PHP 的 全 局 数组 $_FILES, 可 以 从 客户 计算 机 向 远程 服务 器 上 传 文件 。 其 
中 第 一 个 参数 是 表单 的 input name, 第 二 个 下 标 可 以 是 "name", "type", "size"，"tmp_name" 
或 "error"。 具 体 解 释 如 下 。 

(D $ FILES["file" ] "name"]: 被 上 传 文件 的 名 称 。 

(2) $ FILES["file" ]| "type" ]: 被 上 传 文件 的 类 型 。 

(3) $_FILES["file" J["size"]; 被 上 传 文件 的 大 小 ,以 字 节 计 。 

(4) $_FILES["file" ]| "t mb. name" ]: 存储 在 服务 器 的 文件 的 临时 副本 的 名 称 。 

(5) $  FILES("file" ] "error" ]: 在 文件 上 传 过 程 中 发 生 的 错误 代码 。 

这 个 例子 只 是 简单 演示 了 文件 上 传 ,在 实际 项 目 中 ,应 该 增加 有 关 哪 类 用 户 有 权 上 传 文 
件 的 限制 ,来 增强 网 站 的 安全 性 。 


3. 上 传 限制 


【 例 10.24]. 对 文件 上 传 进行 限制 ,用 户 只 能 上 传 . gif 或 .jpeg 文件 ,文件 大 小 必须 小 
T 20KB。 


<?php 

// 接 收 从 表单 中 POST 过 来 的 文件 数据 并 处 理 

if ((($ FILES["file"]["type"] == "image/gif") 
|| ( $ FiLES["file"]["type"] == "image/jpeg") 
|| ( $ FiLES["file"]["type"] == "image/pjpeg")) 
&& ( $ FILES["£ile"]["size"] < 20000)) 





{ 
if ( $ FILES["file"]["error"] > 0) 
{ 
echo "错误 : " . $ FILES["file"]["error"] . "<br />"; 
) 
else 


{ 
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echo" Ef: ". $ FILES["file"]["name"] . "<br />"; 
echo "类 型 : ". $ FILES["file"]["type"] . "<br />"; 
echo "大 小 : ". ($ FILES["£ile"]["size"] / 1024) . " Kb< br />"; 
echo "存储 为 : ". $ FILES["file"]["tmp name"]; 
} 
} 
else 
{ 
echo "无 效 文件 "; 
} 


?> 

注意 : 对 于 IE, 识 别 jpg 文件 的 类 型 必须 是 pjpeg, 对 于 Firefox, 必 须 是 jpeg。 

4. 保存 被 上 传 的 文件 

上 面 的 例子 在 服务 器 的 PHP 临时 文件 夹 中 创建 了 一 个 被 上 传 文件 的 临时 副本 。 这 个 


临时 的 副本 文件 会 在 脚本 结束 时 消失 。 要 保存 被 上 传 的 文件 ,需要 把 它 复 制 到 另外 的 位 置 。 


【 例 10.25) 把 上 传 文件 保存 到 名 为 upload 的 新 文件 夹 中 。 


<?php 

// 接 收 从 表单 中 POST 过 来 的 文件 数据 并 处 理 

if ((($ FILES["file"]["type"] == "image/gif") 
|| ( $  FILES["file"]["type"] image/jpeg") 
|| ( $ _FILES["file"]["type"] == "image/pjpeg")) 
&& ( $ FILES["file"]["size"] < 20000)) 





{ 
if ( $ _FILES["file"]["error"] > 0) 
{ 
echo "错误 : ". $ FILES["file"]["error"] . "<br />"; 
} 
else 
{ 
echo "上 传 : ". $ FILES["£ile"]["name"] . "<br />"; 
echo "类 型 : " . $ FILES["file"]["type"] . "<br />"; 
echo "K/h: ". ($ _FILES["file"]["size"] / 1024) . " Kb« br />"; 
echo "临时 文件 : " . $ FILES["file"]["tmp name"] . "<br />"; 
if (file exists("upload/" . $ FILES["file"]["name"])) 
{ 
echo $ FILES["file"]["name"] . "已 经 存在 ."; 
} 
else 
{ 
// 移 动 文件 位 置 


move uploaded file( $ FILES["file"]["tmp name"], 
"upload/" . $ FILES["file"]["name"]); 
// 输 出 新 位 置 
echo "存储 位 置 : " . "upload/" . $ FILES["file"]["name"]; 
} 
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MA 


上 面 的 脚本 检测 了 是 否 已 存在 此 文件 ,如 果 不 存 在 , 则 把 文件 复制 到 指定 的 文件 夹 。 
注意 : 这 个 例子 把 文件 保存 到 了 名 为 upload 的 新 文件 夹 中 。 


小 结 


本 章 系 统 介 绍 了 通过 PHP 语言 获取 和 处 理 所 提交 表单 的 数据 的 方法 ,并 结合 数据 验 
证 和 文件 上 传 的 实例 通过 注释 的 方式 对 一 些 关 键 的 操作 方法 进行 了 解释 说 明 。 当 然 ,学 习 
是 一 个 循序 渐进 的 过 程 ,虽然 PHP 有 许多 直观 的 函数 ,可 以 很 简单 地 使 用 ,但 是 如 果 没 有 
真正 了 解 它 在 什么 样 的 状态 下 该 怎么 使 用 ,是 无 法 真正 灵活 掌握 表单 的 各 项 功能 的 。 只 有 
进一步 深入 地 进行 研究 ,通过 不 断 的 练习 和 实战 才能 真正 完全 人 掌握 这 些 接口 方法 。 


习题 


HTML 中 设置 复 选 框 的 标签 是 什么 ? 

. PHP 表单 中 GET 与 POST 提交 方法 有 什么 区 别 ? 

. 通过 相同 的 或 不 同 的 过 滤器 来 过 滤 多 个 变量 的 函数 是 什么 ? 

. 利用 HTML 制作 一 个 邮箱 注册 申请 的 网 页 ,用 正则 表达 式 来 验证 用 户 提交 的 数据 。 


ED ow oc 





PHP 操 作 数 据 库 | 


本 章 要 点 : 

。 连接 和 关闭 数据 库 ; 
。 对 数据 库 的 操作 ; 
。 对 数据 表 的 操作 。 


关系 型 数据 库 是 目前 信息 管理 系统 的 基础 软件 ,在 分 类 存储 信息 时 ,关系 型 数据 库 非 常 
有 用 。 在 市 场 上 的 所 有 数据 库 中 ,MySQL 是 最 受 PHP 程序 员 青 睐 的 产品 。MySQL 是 一 
个 小 型 关系 型 数据 库 管 理 系 统 , 开 发 者 为 瑞典 MySQL AB 公司 ,后 被 Sun 公司 收购 。 而 
2009 年 ,Sun 又 被 Oracle 收购 。MySQL 被 广泛 地 应 用 在 Internet 上 的 中 小 型 网 站 中 。 由 
于 其 体积 小 .速度 快 ,总 体 拥有 成 本 低 ,以 及 开放 源码 等 特点 ,许多 采用 PHP 开发 的 网 站 都 
配套 选择 了 MySQL 作为 存储 网 站 数据 的 数据 库 。PHP 将 对 MySQL 数据 库 的 操作 ,如 连 
PE UIE 查询 .修改 ,删除 等 ,都 封装 成 了 函数 ,以 方便 开发 者 操作 数据 库 中 的 这 些 数据 ,使 
得 使 用 PHP 开发 数据 库 应 用 的 过 程 变 得 极其 方便 简单 。 
表 11. 1 展现 了 一 个 名 为 Persons 数据 表 的 例子 。 
表 11.1 Persons 数据 表 





LastName FirstName Address Age City 
三 张 中 关 村 10 北京 
四 李 外 滩 23 上 海 
五 zx 火车 站 20 广州 





该 表 含 有 三 个 记录 (每 个 记录 是 一 个 人 ) 和 5 个 列 (LastName, FirstName, Address, 
Age 以 及 City)。 


(1.1 连接 和 关闭 数据 库 


d 
操作 数据 库 时 ,首先 必须 要 与 数据 库 建立 连接 。PHP 提供 了 操作 MySQL 的 函数 库 。 
11.1.1 连接 数据 库 


在 PHP 中 ,必须 要 先 通 过 mysql_connect() 函 数 完成 与 数据 库 的 连接 ,才能 访问 并 处 理 
数据 库 中 的 数据 。 
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语法 格式 如 下 : 
mysql connect(servername, username, password) ; 


参数 描述 : 

(1) servername: 可 选 。 规 定 要 连接 的 服务 器 。 默 认 是 localhost:3306。 

(2) username; 可 选 。 规 定 登录 所 使 用 的 用 户 名 。 默 认 值 是 拥有 服务 器 进程 的 用 户 的 
名 称 。 

(3) password; 可 选 。 规 定 登 录 所 用 的 密码 。 默 认 是 “”。 

注释 : 还 存在 其 他 的 参数 ,上 面 仅 列 出 了 最 重要 的 参数 。 请 阅读 PHP 的 MySQL 参考 
手册 ,获得 更 多 的 细节 信息 。 

【 例 11.1] 连接 数据 库 。 

在 下 面 的 例子 中 ,在 一 个 变量 中 ($ con) 存 放 了 在 脚本 中 供 稍 后 使 用 的 连接 。 如 果 连 接 
失败 ,将 执行 die 部 分 : 

<?php 

// 传 人 连接 MySQL 的 主机 、 用 户 、 密 码 数据库 

$con = mysql_connect("localhost", "root", "abc123"); 

if (! $ con) 


die( ' 无 法 连接 到 服务 器 :'. mysql_error()); 
} 


?> 


如 果 无 法 连接 MySQL 数据 库 , 那 么 就 无 法 继续 完成 预期 的 工作 。 因 此 ,一 定 要 注意 监 
视 连 接 错 误 并 相应 地 做 出 反应 。PHP 提供 了 很 多 内 置 函 数 可 以 用 来 捕获 数据 库 操作 时 的 
错误 信息 ,例如 mysqli_connect_errno() 和 mysqli_connect_error() 方 法 。 

(1) mysqli_connect_errno() 函 数 返回 连接 数据 库 返 回 的 错误 号 。 

(2) mysqli connect error O 函数 返回 连接 数据 库 返回 的 错误 代码 。 

【 例 11.2】 连接 错误 返回 值 。 


<?php 
// 传 人 连接 MySQL 的 主机 、 用 户 、 密 码 .数据库 
$con = mysql connect("localhost", "root", "abc123"); 
if (mysgli connect errno()) { 
echo ' 数 据 库 连接 错误 ,错误 信息 : '-mysqli connect error(); 
exit(); 
) 
//errno 属性 返回 数据 库 操作 时 的 错误 号 。 
//error 属性 返回 数据 库 操作 时 的 错误 代码 。 
if ( $_mysqli-> errno) { 
echo ' 数 据 库 操作 时 发 生 错 误 , 错 误 代 码 是 : '. $ mysqli -> error; 
) 


?> 


11.1.2 关闭 数据 库 


PHP 脚本 执行 结束 后 ,可 以 使 用 mysql_close() 函 数 关闭 连接 ,释放 连接 资源 。 
语法 格式 如 下 : 
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bool mysql close ( [resource link identifier] ) 


如 果 成 功 则 返回 TRUE, 失 败 则 返回 FALSE. 

mysql_close() 关 闭 指定 的 连接 标识 所 关联 的 到 MySQL 服务 器 的 连接 。 如 果 没 有 指定 
link_identifier, 则 关闭 上 一 个 打开 的 连接 。 

通常 不 需要 使 用 mysql_close() ,因为 由 mysql_connect 打开 的 连接 会 在 脚本 执行 完毕 
后 自动 关闭 。 但 车 在 脚本 中 间 用 完 后 ,提倡 使 用 此 函数 及 时 连接 资源 ,以 提高 效率 。 

[5111.3]. 关闭 数据 库 。 

<?php 

// 传 人 连接 MySQL 的 主机 、 用 户 、 密 码 数据库 


$ con = mysql_connect("localhost", "root", "abc123"); 
if (! $ con) 


{ 
die( ' 无 法 连接 数据 库 : ' . mysql error()); 


} 
// 管理 数据 库 连 接 
mysql close( $ con); 
?> 


(1.2 对 数据 库 的 操作 


11.2.1 创建 数据 库 


在 MySQL 中 创建 数据 库 用 CREATE DATABASE 语句 。 
语法 格式 如 下 : 
CREATE DATABASE database name 


A rib PHP 执行 上 面 的 语句 ,必须 使 用 mysql_query() 函 数 。 此 函数 用 于 向 MySQL 
连接 发 送 查 询 或 命令 。 
【 例 11.4】 创建 一 个 名 为 my_db 的 数据 库 。 


<?php 
// 传 人 连接 MySQL 的 主机 、 用 户 、 密 码 ,数据 库 
$con = mysql connect("localhost", "root", "abc123"); 
if (! $ con) 
{ 
die( ' 无 法 连接 : '. mysql_error()); 


) 
// 执 行 创 建 数据 库 操作 
if (mysql query("CREATE DATABASE my db", $ con) ) 
t 
echo "数据 库 创建 成 功 "; 
} 
else 


{ 
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echo "创建 数据 库 失败 : " . mysql_error(); 
} 
// 关 闭 数据 库 连接 
mysql close( $ con); 
?> 


11.2.2 选择 数据 库 

在 创建 数据 库 或 者 对 数据 库 进 行 其 他 操作 之 前 ,必须 首先 选择 数据 库 。 通 过 mysql_ 
select_db() 函 数 选取 数据 库 , 使 其 成 为 当前 数据 库 。 一 个 数据 库 成 为 当前 数据 库 , 那 么 当前 
所 有 的 操作 都 是 针对 它 的 。 

语法 格式 如 下 : 


bool mysql select db ( string database name [, resource link identifier]) 


如 果 成 功 则 返回 TRUE, 失 败 则 返回 FALSE. 

mysql_select_db() 设 定 与 指定 的 连接 标识 符 所 关联 的 服务 器 上 的 当前 数据 库 。 如 果 没 
有 指定 连接 标识 符 , 则 使 用 上 一 个 打开 的 连接 。 如 果 没有 打开 的 连接 ,本 函数 将 无 参数 调用 
mysql_connect() 来 尝试 打开 一 个 并 使 用 它 。 

【 例 11.5】 选择 数据 库 。 


<? 
$ lnk = mysql connect('localhost', 'root', 'adc123') 
or die(" 无 法 连接 数据 库 服 务 器 "); 
// 将 数据 库 abc 设置 为 当前 数据 库 
mysql select db('abc', $ server link) or die (' 无 法 选择 数据 库 abc: ' . 
mysql error()); 


?> 


11.2.3 删除 数据 库 


对 于 已 经 废弃 的 数据 库 ,可 以 将 其 删除 ,以 节省 服务 器 空间 。 
语法 格式 如 下 : 


DROP DATABASE 数据 库 名 
(1.3 对 数据 表 的 操作 


11.3.1 建立 数据 表 


CREATE TABLE 用 于 在 数据 库 中 创建 数据 库 表 。 
语法 格式 如 下 : 


CREATE TABLE table name 
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( 

column namel data type, 
column name2 data type, 
column name3 data type, 


) 
为 了 执行 此 命令 ,必须 向 mysql_query() 函 数 中 添加 CREATE TABLE 语句 。 


【 例 11.6) 创建 一 个 名 为 Persons 的 表 , 此 表 有 三 列 , 列 名 是 FirstName, LastName 以 
及 Age。 


<?php 
// 传 人 连接 MySQL 的 主机 、 用 户 、 密 码 ,数据库 
$con = mysql_connect("localhost", "root", "abc123"); 
if (! $ con) 
{ 
die( ' 无 法 连接 数据 库 : '. mysql_error()); 
) 
// 执行 创建 数据 库 操作 
if (mysql query("CREATE DATABASE my db", $ con) ) 
( 
echo "数据 库 创建 成 功 "; 
} 
else 
{ 
echo "创建 数据 库 失败 : " . mysql_error(); 
) 
// 选 择 数据 库 my db 
mysql select db("my db", $ con); 
// 创建 数据 表 Persons 
$ sql = "CREATE TABLE Persons 
( 
FirstName varchar(15), 
LastName varchar(15), 
Age int 
Ir 
mysql_query( $ sql, $ con); 
// 关 闭 数据 库 连接 
nysql close( $ con); 
?> 


注意 : 在 创建 表 之 前 ,必须 首先 通过 mysql_select_db() 函 数 选取 数据 库 。 
11.3.2 向 数据 库 表 插入 数据 


INSERT INTO 语句 用 于 向 数据 库 表 添加 新 记录 。 
语法 格式 如 下 : 


INSERT INTO table name VALUES (valuel, value2, …) 


还 可 以 指定 希望 在 其 中 插入 数据 的 列 ; 
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INSERT INTO table name (columnl, column2, … ) VALUES (valuel, value2, —) 


注意 : SQL 语句 对 大 小 写 不 敏感 。INSERT INTO 4 insert into 相同 。 
在 例 11.6 中 ,创建 了 一 个 名 为 Persons 的 表 , 有 三 个 列 : Firstname, Lastname 以 及 


Age, 下 面 将 在 例 11.7 中 使 用 同样 的 表 。 


(6111.7) 在 已 创建 的 Persons 表 中 添加 两 条 新 记录 。 


<?php 
// 传 人 连接 MySQL 的 主机 用户 .密码 .数据库 
$ con = mysql connect(" localhost", "root", "abc123") ; 
if (! $ con) 
{ 
die( ' 无 法 连接 数据 库 : '. mysql_error()); 
// 选 择 数据 库 my_db 
mysql select db("ny db", $ con); 
// Is] Persons 表 插 和 人 数据 
mysql query("INSERT INTO Persons (FirstName, LastName, Age) 
VALUES ('3K', '=', '35')"); 
// 向 Persons 表 插入 数据 
mysql query("INSERT INTO Persons (FirstName, LastName, Age) 
VALUES ('zE', "Du', '33')"); 
// 关 闭 数据 库 连接 
mysql close( $ con); 
?> 


11.3.3 更 新 数据 库 表 中 的 数据 


UPDATE 语句 用 于 在 数据 库 表 中 修改 数据 。 
语法 格式 如 下 : 


UPDATE table name SET column name = new value WHERE column name = some value 
[B 11.8] 在 已 建立 的 Persons 表 中 更 新 数据 。 


<?php 
// 传 人 连接 MySQL 的 主机 、 用 户 .密码 .数据库 
$ con = mysql_connect("localhost", "root", "abc123"); 
if (! $ con) 
{ 
die( ' 无 法 连接 数据 库 : '. mysql_error()); 
} 
// 选 择 数据 库 my_db 
mysql select db("ny db", $ con); 
// 更 新 数据 库 中 的 数据 
mysql query("UPDATE Persons SET Age = '36' 
WHERE FirstName = 'jK'AND LastName = '='"); 
// 关 闭 数据 库 连 接 
mysql close( $ con); 
?> 
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更 新 后 Persons 数据 表 中 数据 如 表 11. 2 所 示 。 
表 11.2 更 新 后 的 Persons 数据 表 








FirstName LastName 
张 = 36 
李 四 33 





11.3.4 删除 数据 库 中 的 数据 


DELETE FROM 语句 用 于 从 数据 库 表 中 删除 记录 。 
语法 格式 如 下 : 
DELETE FROM table name WHERE column name = some value 


(61 11.9] 删除 Persons 表 中 所 有 LastName- 'Griffin'ff) i3 . 


<?php 
// 传 人 连接 MySQL 的 主机 、 用 户 、 密 码 ,数据库 
$ con = mysql_connect("localhost", "root", "abc123") ; 
if (! $ con) 
{ 
die( ' 无 法 连接 数据 库 : '. mysql_error()); 


} 

// 选 择 数 据 库 my db 

mysql select db("my db", $ con); 

// 删 除数 据 库 中 的 数据 

mysql query("DELETE FROM Persons WHERE FirstName = 'jK'"); 
// 关 闭 数据 库 连接 

mysql close( $ con); 

?» 


执行 删除 程序 后 的 Persons 数据 表 中 数据 如 表 11.3 所 示 。 
表 11.3 执行 删除 后 的 Persons X 





FirstName LastName 











= 四 





11.3.5 从 数据 库 表 中 选取 数据 


SELECT 语句 用 于 从 数据 库 中 选取 数据 。 
语法 格式 如 下 : 





SELECT column name(s) FROM table name 
(6111.10) 选取 存储 在 Persons 表 中 的 所 有 数据 。 


<?php 
// 传 人 连接 MySQL 的 主机 、 用 户 、 密 码 ,数据库 
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$con = mysql_connect("localhost", "root", "abc123") ; 
if (! $ con) 
{ 
die( ' 无 法 连接 数据 库 : '. mysql_error()); 
) 
// 选 择 数据 库 ny. db 
mysql select db("my db", $ con); 
// 执 行 查询 
$ result = mysql_query("SELECT * FROM Persons"); 
// 从 查询 结果 中 循环 输出 
while( $ row = mysql fetch array( $ result)) 
{ 
echo $ row['FirstName'] . "" . $ row['LastName']; 
echo "« br />"; 
i 
// 关 闭 数据 库 连接 
mysql close( $ con); 
?> 


在 例 11. 10 F, $ result 变量 中 存放 着 由 mysql_query0O 〇 函数 返回 的 数据 ,使 用 mysql_ 
fetch_array() 函 数 以 数组 的 形式 从 记录 集 返 回 第 一 行 。 随 后 对 mysql_fetch_array() 函数 的 
调用 都 会 返回 记录 集中 的 下 一 行 。while loop 语句 会 循环 记录 集中 的 所 有 记录 。 为 了 输出 
每 行 的 值 ,使 用 了 PHP 的 $row 变量 ($row[ 'FirstName'] 和 $row['LastName'])。 

以 上 代码 将 输出 以 下 内 容 : 


张 三 
李 四 


11.3.6 获取 记录 个 数 


可 以 通过 调用 mysql_num_rows() 查 看 SELECT 语句 的 查询 结果 的 行 数 。 
语法 格式 如 下 : 


mysql num rows() 
[5111.11] 获取 记录 个 数 。 


< 

// 传 人 连接 MySQL 的 主机 、 用 户 .密码 数据库 

$con = nysql connect("localhost", "root", "abc123"); 
// 选 择 数据 库 

mysql select db("db1", $ con); 

// 查 询 记 录 

$result = mysql query("SELECT * FROM tablel", $ con); 
// 获 取 记 录 数 量 

$ num rows = mysql num rows( $ result); 

// 输 出 记录 数量 

echo " $ num rows 行 \n"; 

> 
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mysql num rows 命令 仅 对 SELECT 语句 有 效 。 

要 取得 被 INSERT、UPDATE 或 者 DELETE 查询 所 影响 到 的 行 的 数目 ,需要 使 用 
mysql_affected_rows() 函 数 。 

语法 格式 如 下 : 


mysql affected rows() (resource result) 


【 例 11.12]. 获取 受 影响 记录 个 数 。 


<? 

// 传 人 连接 MySQL 的 主机 用户 .密码 ,数据库 

$ con = mysql connect("localhost", "root", "abc123"); 
// 选 择 数据 库 

mysql_select db("dbl", $ con); 

// 插 人 数据 

$result = mysql query("INSERT INTO tablel (coll,col2) values ('a', 'b')", $ con); 
// 获 取 受 影响 的 行 数 

$ num rows = mysql affected rows( $ result); 

// 输 出 受 影响 的 行 数 

echo " $ num rows 行 \n"; 

?> 


小 结 


本 章 系统 介绍 了 通过 PHP 语言 连接 .选择 . 读 取 数 据 库 表 数据 的 常用 操作 ,并 结合 实 
例 对 一 些 关键 接口 方法 进行 了 说 明 。 本 童 的 内 容 主要 结合 MySQL 数据 库 进行 相关 介绍 ， 
在 实际 场景 中 ,读者 可 能 会 遇 到 需要 操作 其 他 类 型 数据 库 的 情况 ,但 具体 语法 基本 类 似 , 仍 
然 可 以 参考 本 章 学 习 的 内 容 。 


习题 
1. 写 出 启动 MySQL 和 关闭 MySQL 的 命令 。 


2. 建立 student 数据 库 ,建立 class] ,class2 数据 表 , 在 class] 中 建立 num name sex 字 
段 , 并 写 人 两 条 记录 。 


Co 
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ABER: 

。 概要 设计 ; 

。 代码 实现 。 

在 以 上 的 章节 中 ,对 于 动态 网 站 的 开发 所 涉及 的 内 容 进 行 了 详 述 。 在 本 章 中 将 综合 所 
学 内 容 ,制作 一 个 网 上 商城 管理 系统 的 实例 。 


(2.1 概要 设计 


12.1.1 系统 功能 及 逻辑 结构 


网 上 商城 系统 的 业务 逻辑 比较 简单 ,可 以 参考 互联 网 上 现成 的 站 点 ,如 天 猫 .京东 等 ,其 
主体 功能 包括 前 台 购 物 结算 界面 和 后 台 管理 两 大 部 分 。 

前 台 部 分 由 用 户 使 用 ,主要 包括 用 户 管理 (用 户 登 录 注册 ) ,商品 浏览 ,购物 车 管理 ,个 
人 账户 管理 等 。 

后 台 部 分 由 管理 员 使 用 ,主要 包括 管理 员 身 份 验证 ,商品 管理 ,订单 管理 ,会 员 管理 , 系 
统管 理 等 。 

整个 网 上 商城 的 迎 辑 结构 图 如 图 12. 1 所 示 。 
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图 12.1 在 线 商城 逻辑 结构 图 
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MV 


12.1.2 数据 库 设 计 


网 上 商城 的 数据 库 设计 中 ,包括 20 个 表 的 建立 。 表 12. 1 一 表 12. 20 详细 介绍 了 各 个 
表 的 字段 名 称 ,代码 以 及 数据 类 型 。 
商品 信息 表 如 表 12. 1 所 示 。 


表 12.1 商品 信息 表 (products) 








字段 名 称 R B 数据 类 型 是 否 为 空 
商品 编号 ( 自 增 ) products_id int(5) DEFAULT'O'NOTNULL 
商品 名 称 products_name varchar(32) DEFAULT''NOTNULL 
商品 描述 products_description text 
商品 库存 数量 products_quantity int(4) DEFAULT'O'NOTNULL 
商品 模型 products_model varchar(12) 
商品 图 片 products_image varchar(64) 
商品 地 址 products_url varchar(255) 
商品 报价 products price decimal(8,2) DEFAULT '0. 00'NOTNULL 
商品 上 架 日 期 products_date_added varchar(8) 
商品 查看 次 数 products_viewed int(5) DEFAULT '0' 


商品 订单 信息 表 如 表 12. 2 所 示 。 
表 12.2 商品 订单 信息 表 (orders) 





字段 名 称 R a 数据 类 型 是 否 为 空 
订单 编号 ( 自 增 ) orders_id int(5) DEFAULT'0'NOTNULL 
顾客 编号 customers id int(5) DEFAULT'0'NOTNULL 
顾客 姓名 customers_name varchar(64) DEFAULT''NOTNULL 
顾客 地 址 customers_street_address varchar(64) DEFAULT''NOTNULL 
顾客 城市 customers_city varchar(32) DEFAULT''NOTNULL 
顾客 邮编 customers_postcode varchar(8) DEFAULT''NOTNULL 
顾客 省 份 customers state varchar( 32) 
顾客 国家 customers_country varchar(32) DEFAULT''NOTNULL 
顾客 电话 customers_telephone varchar(32) DEFAULT''NOTNULL 
顾客 邮件 地 址 customers email address varchar(96) DEFAULT''NOTNULL 
收 货 人 姓名 delivery_name varchar(64) DEFAULT''NOTNULL 
收 货 地 址 delivery street address varchar(64) DEFAULT''NOTNULL 
收 货 城市 delivery city varchar(32) DEFAULT''NOTNULL 
收 货 邮 编 delivery_postcode varchar(8) DEFAULT''NOTNULL 
收 货 省 份 delivery_state varchar(32) 

收 货 国家 delivery country varchar(32) DEFAULT''NOTNULL 
支付 方式 payment method varchar(12) DEFAULT''NOTNULL 
类 型 cc_type varchar(20) 

所 有 者 cc owner varchar(64) 

编号 cc_number varchar(32) 

过 期 cc_expires varchar(4) 

购买 日 期 date_purchased varchar(8) 


商品 缴 税 products tax int(2) 
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用 户 信息 表 如 表 12. 3 所 示 。 
表 12.3 用 户 信息 表 (olm_cart) 








字段 名 称 代 mu 数据 类 型 是 否 为 空 

客户 编号 ( 自 增 ) customers_id int(5) DEFAULT'0'NOTNULL 
客户 性 别 customers_gender char(1) DEFAULT''NOTNULL 
客户 姓 customers_firstname varchar(32) DEFAULT''NOTNULL 
客户 名 customers lastname varchar(32) DEFAULT''NOTNULL 
客户 生日 customers dob varchar(8) DEFAULT''NOTNULL 
客户 E-mail 地 址 customers email address varchar(96) DEFAULT''NOTNULL 
客户 实际 地 址 customers street address varchar(64) DEFAULT''NOTNULL 
客户 邮编 customers_postcode varchar(8) DEFAULT''NOTNULL 
客户 城市 customers_city varchar(32) DEFAULT''NOTNULL 
客户 省 份 customers_state varchar(32) 

客户 国家 customers_country varchar(32) DEFAULT''NOTNULL 
客户 电话 customers_telephone varchar(32) DEFAULT''NOTNULL 
客户 传真 customers fax varchar(32) 

客户 密码 customers password varchar(12) DEFAULT''NOTNULL 


供应 商 信息 表 如 表 12. 4 所 示 。 
表 12.4 ”供应 商 信息 表 (manufacturers) 





字段 名 称 Rt m 数据 类 型 是 否 为 空 
供应 商 编号 manufacturers id int(5) DEFAULT'0'NOTNULL 
供应 商 名 称 manufacturers_name varchar(32) DEFAULT''NOTNULL 
供应 商 地 址 manufacturers_location tinyint(1) DEFAULT'0'NOTNULL 
供应 商 LOGO manufacturers_image varchar(64) 


商品 特价 信息 表 如 表 12. 5 所 示 。 
表 12.5 商品 特价 信息 表 (specials) 





字段 名 称 R 8 数据 类 型 是 否 为 空 

特价 编号 specials_id int(5) DEFAULT'0'NOTNULL 
商品 编号 products_id int(5) DEFAULT'0'NOTNULL 
优惠 价格 specials_new_products_price decimal(8,2) DEFAULT 0. 00'NOTNULL 
优惠 日 期 specials date added char(8) 





商品 评价 信息 表 如 表 12. 6 所 示 。 
表 12.6 商品 评价 信息 表 (reviews_extra) 








字段 名 称 Rt B 数据 类 型 是 否 为 空 
评价 编号 reviews id int(5) DEFAULT'0'NOTNULL 
商品 编号 products_id int(5) DEFAULT'0'NOTNULL 
客户 编号 customers_id int(5) DEFAULT'0'NOTNULL 
评论 时 间 date_added char(8) DEFAULT''NOTNULL 


评价 阅读 次 数 reviews read int(5) 
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商品 评价 详细 信息 表 如 表 12.7 所 示 。 
表 12.7 商品 评价 详细 信息 表 (reviews) 








字段 名 称 代码 数据 类 型 是 否 为 空 

评价 编号 reviews_id int(5) DEFAULT'0'NOTNULL 
详细 评价 Teviews_text text NOTNULL 

评分 reviews rating int(1) 





顾客 详细 信息 表 如 表 12. 8 所 示 。 
表 12.8 顾客 详细 信息 表 (customs_info) 








字段 名 称 代 码 数据 类 型 是 否 为 空 
客户 信息 编号 customers_info_id int(5) DEFAULT '0'NOTNULL 
客户 最 后 登录 时 间 customers info date of last logon char(8) 
客户 登录 次 数 customers info number of logons int(5) 
客户 注册 时 间 customers info date account created char(8) 
客户 信息 修改 时 间 customers info date account last modified char(8) 


顾客 购物 篮 信息 表 如 表 12.9 所 示 。 
表 12.9 顾客 购物 篮 信 息 表 (customs_basket) 





字段 名 称 代 mu 数据 类 型 是 否 为 空 
订单 条 目 编号 customers_basket_id int(5) DEFAULT'0'NOTNULL 
客户 编号 customers_id int(5) DEFAULT'0'NOTNULL 
商品 编号 products_id int(5) DEFAULT'0'NOTNULL 
商品 数量 customers basket quantity int(2) DEFAULT'0'NOTNULL 
商品 购买 日 期 customers basket date added char(8) 


送 货 地 址 信息 表 如 表 12. 10 所 示 。 
512.10. 送 货 地 址 信息 表 (address_book) 





字段 名 称 R B 数据 类 型 是 否 为 空 

送 货 地 址 编号 address book id int(5) DEFAULT '0'NOTNULL 
收 货 人 性 别 entry_gender char(1) DEFAULT''NOTNULL 
收 货 人 姓 entry firstname varchar( 32) DEFAULT''NOTNULL 
收 货 人 名 entry_lastname varchar(32) DEFAULT''NOTNULL 
收 货 人 地 址 entry street address varchar(64) DEFAULT''NOTNULL 
收 货 人 邮编 entry_postcode varchar(8) DEFAULT''NOTNULL 
收 货 人 城市 entry city varchar(32) DEFAULT''NOTNULL 
收 货 人 省 份 entry. state varchar(32) 

收 货 人 国家 entry country varchar(32) DEFAULT''NOTNULL 





顾客 送 货 地 址 关系 表 如 表 12. 11 所 示 。 








表 12.11 顾客 送 货 地 址 关系 表 (address_book_to_customers) 
字段 名 称 Rt B 数据 类 型 是 否 为 空 
关系 编号 address book to customers id int(5) DEFAULT'0'NOTNULL 
送 货 地 址 编号 address book id int(5) DEFAULT'0'NOTNULL 
客户 编号 customers_id int(5) DEFAULT'0'NOTNULL 
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订单 明细 信息 表 如 表 12. 12 所 示 。 


表 12.12 订单 明细 信息 表 (orders_product) 








字段 名 称 R Wu 数据 类 型 是 否 为 空 

明细 编号 orders products id int(5) DEFAULT'0'NOTNULL 
订单 编号 orders_id int(5) DEFAULT'O'NOTNULL 
商品 编号 products id int(5) DEFAULT'0'NOTNULL 
商品 名 称 products_name varchar(64) DEFAULT'NOTNULL 
商品 价格 products_price decimal(8,2) DEFAULT '0. 00'NOTNULL 
商品 数量 products quantity int(2) DEFAULT'0'NOTNULL 





商品 供应 商 关 系 表 如 表 12. 13 所 示 。 


表 12.13 商品 供应 商 关 系 表 (products_to_manufacturers) 








字段 名 称 Rt Wu 数据 类 型 是 否 为 空 
关系 编号 products_to_manufacturers_id int(5) DEFAULT'0'NOTNULL 
商品 编号 products id int(5) DEFAULT'0'NOTNULL 
供应 商 编号 manufacturers_id int(5) DEFAULT'0'NOTNULL 


供应 商 分 类 关系 表 如 表 12. 14 所 示 。 


表 12.14 供应 商 分 类 关系 表 (manufacturers_to_category) 





字段 名 称 代 a 数据 类 型 是 否 为 空 
关系 编号 manufacturers_to_category_id int(5) DEFAULT'0'NOTNULL 
供应 商 编号 manufacturers_id int(5) DEFAULT'0'NOTNULL 
根 分 类 编号 category_top_id int(5) DEFAULT'0'NOTNULL 


商品 顶级 分 类 信息 表 如 表 12. 15 所 示 。 


表 12.15 商品 顶级 分 类 信息 表 (category_top) 





字段 名 称 代 8 数据 类 型 是 否 为 空 
根 分 类 编号 category_top_id int(5) DEFAULT'0'NOTNULL 
根 分 类 名 称 category_top_name varchar(32) DEFAULT''NOTNULL 
排序 sort order int(3) 

根 分 类 图 片 category_image varchar(64) 





j 品 分 类 索引 表 如 表 12. 16 所 示 。 


表 12.16 商品 分 类 索引 表 (category_index) 








字段 名 称 R 码 数据 类 型 是 否 为 空 
分 类 索引 编号 category_index_id int(5) DEFAULT '0'NOTNULL 
分 类 索引 名 称 category index name varchar(32) DEFAULT''NOTNULL 
查询 SQL sql. select varchar(16) DEFAULT''NOTNULL 
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商品 顶级 分 类 与 索引 关系 表 如 表 12. 17 所 示 。 


表 12.17 商品 顶级 分 类 与 索引 关系 表 (category_index_to_top) 








字段 名 称 代 码 数据 类 型 是 否 为 空 
关系 编号 category_index_to_top_id int(5) DEFAULT'0'NOTNULL 
根 分 类 编号 category_top_id int(5) DEFAULT'0'NOTNULL 
分 类 索引 编号 category_index_id int(5) 
排序 sort order int(3) 





商品 子 分 类 信息 表 如 表 12. 18 所 示 。 


R12.18 商品 子 分 类 信息 表 (subcategories) 








字段 名 称 代 B 数据 类 型 是 否 为 空 
子 分 类 编号 subcategories id int(5) DEFAULT '0'NOTNULL 
子 分 类 名 称 subcategories_name varchar(32) DEFAULT''NOTNULL 
子 分 类 图 片 subcategories image varchar(64) 





分 类 父子 关系 表 如 表 12.19 所 示 。 


R12.19 分 类 父子 关系 表 (subcategories_to_category) 





字段 名 称 代 B 数据 类 型 是 否 为 空 
关系 编号 subcategories_to_category_id int(5) DEFAULT'O'NOTNULL 
子 分 类 编号 subcategories_id int(5) DEFAULT'O'NOTNULL 
父 分 类 编号 category_top_id int(5) DEFAULT'0'NOTNULL 


商品 分 类 关系 表 如 表 12. 20 所 示 。 


表 12.20 商品 分 类 关系 表 (products_to_subcategories) 





字段 名 称 代 码 数据 类 型 Russ 

关系 编号 products_to_subcategories_id int(5) DEFAULT'0'NOTNULL 
商品 编号 products_id int(5) DEFAULT'O'NOTNULL 
分 类 编号 subcategories id int(5) DEFAULT '0'NOTNULL 


12.1.3 系统 运行 环境 要 求 


硬件 环境 要 求 如 下 。 

CPU: 1 GHz 以上。 

内 存 : 512MB 以 上 。 

分 辨 率 : 支持 VGA 或 分 辨 率 更 高 的 监视 器 。 
色彩 : 256 色 以 上 。 

操作 系统 : Microsoft Windows。 
软件 环境 要 求 如 下 。 

操作 系统 : Windows XP 系列 。 
数据 库 : MySQL 5. 0。 

服务 器 : Apache。 

开发 语言 : PHP。 
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(2.20 代码 实现 


url? 

最 终 实现 的 网 上 商城 系统 共 包含 近 一 千 个 PHP 代码 文件 ,以 及 相应 的 样式 表 和 JS 脚 
本 、 图 片 等 。 限 于 篇 幅 所 限 , 本 书 仅 选取 了 其 中 几 个 核心 模块 的 代码 供 读 者 参考 。 网 上 商城 
系统 的 运行 效果 如 图 12.2 所 示 。 


总 新 商品 
HR 201580 HN KAUR mik ric scc c 
Y200.00 Y2,100.00 Y900.00 Y1,200.00 
Boo 
女装 at>» 
BERG TARAS RE 201508 3 EE WOSWRR 2015 sinit RM RMAF 8 E ERB 
¥450.00 200.00 2,100.00 1,000.00 


图 12.2 网 上 商城 最 终 运行 效果 


12.2.1 注册 账号 


注册 账号 功能 由 register. php、account. php 和 success. php 这 三 个 核心 PHP 页 面 组 
成 ,其 中 ,register. php 用 于 填写 注册 信息 .account. php 用 于 接收 和 处 理 注册 信息 success. 


php 则 用 于 注册 成 功 后 返回 注册 信息 。 
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[B] 12.1】 register. php 的 核心 源 代码 。 
<?php 
// 定 义 用 户 控制 类 
class ControllerAffiliateRegister extends Controller { 
private $ error - array(); 
public function index() { 
if ( $ this—> affiliate - » isLogged()) { 
$ this -> redirect( $ this -> url- » link('affiliate/account', '', 'SSL')); 
$ this —» load language( 'affiliate/register'); 
$ this — > document -> setTitle( $ this - > language - > get('heading title')); 


$ this -> load - > model( 'affiliate/affiliate'); 


if (( $ this -> request- > server['REQUEST METHOD'] == 'POST') && $ this- » validate()) { 
$ this -> model affiliate affiliate - > addAffiliate( $ this -> request -> post) ; 


$this-»affiliate- » login( $ this 一 > request -> post['email'], $ this -> request -> post 
[ 'password']); 


$ this — > redirect( $ this -> url -> link('affiliate/success')); 
} 


$ this 一 > data[ 'breadcrumbs'] = array(); 


$ this 一 > data[ 'breadcrumbs'][] = array( 


"text' => $ this—> language —>get('text_home'), 
‘href! => $ this -> url -> link('common/hone'), 
‘separator’ => false 
); 
$ this -> data['breadcrumbs'][] = array( 
'text' => $this- » language - > get('text account'), 
"href" => $this-»url-»link('affiliate/account', '', 'SSL'), 
'separator' => $ this -> language -> get('text separator') 
); 
$ this -> data['breadcrumbs'][] = array( 
'text' => $ this-> language -> get('text register'), 
'href' => $this-»url-»link('affiliate/register', '', 'SSL'), 


'separator' => $ this- > language -> get('text separator') 
i 


$ this —» data[ "text account already] = sprintf($ this —> language -» get( text. sccount.- 
already'), $this-» url-» link('affiliate/login', ", 'SSL')); 


$ errors - array( 
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"warning! = > 'error warning', 
'firstname' => 'error firstname', 
'email' => 'error email', 
'telephone' => 'error telephone', 
'password' => 'error password', 
‘confirm! => 'error confirn', 
'address 1' => 'error address 1', 
'city' => 'error city', 

'postcode' => 'error postcode', 
'country' => 'error country', 
'zone' => 'error zone', 


E 


foreach ( $ errors as $key => $ value) { 
if (isset( $ this -> error[ $ key])) { 
$this-»data[ $ value] = $this-» error[ $ key]; 
) eise ( 
$this-»data[ $ value] = ''; 


$this-»data['action'] = $this-»url-»link('affiliate/register', '', 'SSL'); 


if (isset( $ this 一 > request - > post[ 'firstname'])) { 
$ this -> data['firstname'] = $ this- » request - > post[ 'firstname']; 
) eise ( 

$this-»data['firstname'] = ''; 


if (isset( $ this -> request -> post[ 'email'])) { 
$ this—>data['email'] = $ this—> request -> post[ 'email']; 
} else { 

$ this-» data['email'] = 





if (isset( $ this -> request - > post[ 'telephone'])) { 
$ this -> data['telephone'] = $ this- > request - > post[ 'telephone']; 
) eise ( 

$this-»data['telephone'] = ''; 


if (isset( $ this -> request -> post[ 'fax'])) ( 
$ this—>data['fax'] = $this-» request -> post[ 'fax']; 
) eise ( 

S$this-»data['fax'] = ''; 


if (isset( $ this — > request — > post[ 'company'])) { 
$this-»data['company'] = $ this —> request —» post[ 'company']; 
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) eise ( 
$this-»data['company'] = ''; 


if (isset( $ this -> request - > post[ 'website'])) { 
$ this -> data[ 'website'] = $ this- > request -> post[ 'website']; 
} else { 
$this-»data['website'] = ''; 
} 


if (isset( $ this -> request — > post[ 'address 1'])) { 
$ this -> data['address 1'] = $ this—> request -> post[ 'address 1']; 
) else ( 
$this-»data['address 1'] = ''; 
} 


if (isset( $ this -> request -> post[ 'address 2'])) { 
$ this-» data['address 2'] = $ this -> request - » post[ 'address 2']; 
} else { 
$this-»data['address 2'] = ''; 
j 


if (isset( $ this -> request -> post[ 'postcode'])) { 
$ this -> data['postcode'] = $ this -> request -> post[ 'postcode']; 
} else { 

$ this -> data[ 'postcode'] = ''; 


if (isset( $ this -> request - » post['city id'])) { 
$this-»data['city id'] = $ this -> request -> post['city id']; 
} else { 

$this-»data['city id'] = ''; 


$this-»data['country id'] = $ this -> config-» get('config country id'); 


if (isset( $ this -> request - > post['zone id'])) ( 
$this-» data['zone id'] = $ this -> request -> post['zone id']; 
) eise ( 
$this-»data['zone id'] = ''; 


$ this — > load - > model( 'localisation/country') ; 


$ this -> data[ 'countries'] = $this- model localisation country - > getCountries(); 


if (isset( $ this -> request -> post[ 'tax'])) { 
$ this—>data['tax'] = $this-» request —>post['tax']; 
} else { 
$ this —>data['tax'] = ''; 
} 


981238 ”PHP 动态 网 站 设计 实例 


if (isset( $ this—> request - > post[ 'paynent'])) { 
$ this 一 > data['payment'] = $this 一 > request —> post[ 'payment']; 
) eise ( 

$ this -> data[ 'payment'] = 'cheque'; 


if (isset( $ this - > request - > post[ 'cheque'])) ( 
$this-»data['cheque'] = $ this -> request - > post[ 'cheque']; 
) eise ( 

$this-»data['cheque'] = ''; 
} 


if (isset( $ this -> request -> post[ 'paypal'])) { 
$this-»data['paypal'] = $ this -> request - » post[ 'paypal']; 
} else { 

$ this -> data[ 'paypal'] = ''; 
} 


if (isset( $ this -> request -> post[ 'bank_name'])) { 
$ this -> data[ 'bank_name'] = $ this -> request - > post[ 'bank name']; 
} else { 
$this-»data['bank name'] = ''; 
) 


if (isset( $ this -> request - > post[ bank branch number'])) { 
$ this -> data['bank branch number'] = $ this 一 > request -» post['bank branch number']; 
) eise ( 

$this-»data['bank branch number'] = ''; 


if (isset( $ this -> request - > post['bank swift code'])) { 
$ this -> data['bank swift code'] = $ this -> request -> post['bank swift code']; 
) eise ( 

$this-»data['bank swift code'] = ''; 


if (isset( $ this -> request - > post[ bank account name'])) ( 
$ this -> data['bank account name'] = $ this—> request - > post[ 'bank account name']; 
) else ( 

$ this -> data['bank account name'] = 





if (isset( $ this - > request — > post['bank account number'])) { 
$ this — > data['bank account number'] = $ this - > request - > post['bank account | 


number']; 


} else { 
$ this -> data[ 'bank_account_number'] = ''; 


if (isset( $ this -> request - > post[ 'password'])) { 
$ this -> data[ 'password'] = $this-» request -> post[ 'password']; 
} eise ( 
$this-»data['password'] = ''; 
} 
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if (isset( $ this -> request -> post[ 'confirn'])) { 
$this-»data['confirn'] = $this-» request -> post[ 'confirn']; 
) eise ( 

$this-»data['confirm'] = ''; 


if ( $ this-» config-»get('config affiliate id')) ( 
$ this - > load - > nodel('catalog/information'); 


$ information info = $this- > model catalog information - > getInformation 
( $ this-» config-» get('config affiliate id')); 


if ( $ information info) { 
$ this -> data['text agree'] = sprintf( $ this -> language - > get('text agree 
'), $ this- » url -» link('information/information/info', 'information id- '. $ this- » config 
-»get('config affiliate id'), 'SSL'), $ information info['title'], $ information info['title 
"s 
) eise( 
$this-»data['text agree'] = ''; 
i 
} else { 
$this-»data['text agree'] = ''; 


if (isset( $ this -> request - > post[ 'agree'])) { 
$ this -> data['agree'] = $this-» request - » post[ 'agree']; 
) eise ( 

$ this -> data['agree'] = false; 


if (file exists(DIR TEMPLATE . $ this — > config - > get('config template') . '/template/ 
affiliate/register.tpl')) { 
$ this -> template = $ this -> config ^ get('config template') . '/template/ 
affiliate/register. tpl'; 
) eise ( 
$this-»template = 'default/template/affiliate/register. tpl'; 


$ this—>children = array( 
'common/column left', 
'common/column right', 
'common/content top', 
'common/content bottom', 
‘common/footer', 
‘common/header' 


); 
$ this - > response - > setOutput( $ this - > render()); 
private function validate() { 


if ((strlen(utf8 decode( $ this — > request - > post [ 'firstname'])) <1) || (strlen(utf8_ 
decode( $ this - > request -> post[ 'firstname'])) > 32)) ( 
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$this-»error['firstname'] = $ this -> language- » get('error firstname'); 


if ((strlen(utf8 decode( $ this » request — > post[ 'email'])) > 96) || !preg match('/^[^N 
Q]* Q. *V.[a-z](2,6) $ /i', $this-» request -> post['email'])) { 
$this-»error['email'] = $ this—> language -> get('error email'); 


if ($this-»model affiliate affiliate — > get?IbtalAffiliatesByEmail( $ this — > request - > 
post[ 'email'])) { 
$this-»error['warning'] = $this-» language -» get('error exists'); 


if ((strlen(utf8 decode( $ this - > request - > post[ 'telephone'])) <1) || (strlen(utf8 - 
decode( $ this - » request - » post[ 'telephone'])) » 32)) ( 
$this-»error['telephone'] = $ this -> language- » get('error telephone'); 


if ((strlen(utf8 decode( $ this - > request - > post[ 'address 1'])) <1) || (strlen(utf8 - 
decode( $ this — > request -> post[ address 1'])) > 128)) ( 
$ this -> error['address 1'] = $ this- » language -> get('error address 1"); 


if ( $ this -> request -> post[ 'city_id'] == '') { 
$ this -> error['city'] = $ this- > language -> get('error_city'); 


$ this — > load- > model( 'localisation/country'); 


$country_info = $ this - > model localisation country - > getCountry( $ this - > 
conf ig -> get('config_country_id')); 


if ( $ country_info && $ country info['postcode required'] && (strlen(utf8 decode 
( $ this -> request - > post[ 'postcode'])) < 2) || (strlen(utf8 decode( $ this -> request 一 > post 
['postcode'])) > 10)) { 
$ this -> error[ 'postcode'] = $ this -> language -> get('error postcode'); 


if ( $ this -> request -> post['zone id'] == '') { 
$ this—>error['zone'] = $ this -> language -> get( 'error_zone'); 


if ((strlen(utf8 decode( $ this — > request — > post [ 'password'])) < 4) || (strlen(utf8_ 
decode( $ this - > request - > post[ 'password'])) > 20)) ( 
$ this -> error['password'] = $ this- > language -> get('error password'); 


if ( $ this -> request - > post['confirm'] != $ this -> request - » post[ 'password']) { 
$this-»error['confirn'] = $ this -> language -» get('error confirn'); 
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if ( $ this—>config—>get('config affiliate id')) { 
$ this—> load 一 > model( 'catalog/information'); 


$ information info = $ this- > model catalog information - > getInformation 
( $ this-»config-»get('config affiliate id')); 


if ( $ information info && ! isset( $ this -> request — > post[ 'agree'])) ( 


$ this—>error['warning'] = sprintf( $ this - > language - > get('error agree'), 
$ information info[ 'title']); 


} 


if (! $ this—>error) { 
return true; 

} else { 
return false; 

j 

} 


} 


> 


注册 页 面 效 果 如 图 12. 3 所 示 。 
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12.3 注册 页 面 效 果 


12.2.2 登录 注销 


为 了 实现 身份 辨识 ,注册 用 户 需 要 输入 用 户 名 和 密码 登录 后 才能 进行 购物 操作 。 此 部 
分 的 功能 主要 包括 : 登录 、 注 销 、 忘 记 密 码 等 组 成 ,分别 由 login. php、logout. php, forgotten. 
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php 和 password. php 等 页 面 组 成 。 
[B] 12.2】 login. php 的 源 代码 。 


<?php 
class ControllerAffiliateLogin extends Controller { 
private $ error = array(); 


public function index() { 
if ($this-»affiliate-» isLogged()) ( 
$ this —> redirect( $ this -> url -> link('affiliate/account', '', 'SSL')); 


$ this — > language - > load( 'affiliate/login'); 
$ this — > document - > setTitle( $ this - > language - > get( 'heading title')); 


if (( $ this -> request - > server['REQUEST METHOD'] == 'POST') && isset( $ this -> 
request - > post[ 'enail']) && isset( $ this -> request - > post[ 'password']) && $ this -> validate 
Ot 
if (isset( $ this -> request -> post[ 'redirect'])) ( 
$ this - > redirect (str_replace ( '&amp; ', '&', $this- > request - > post 
['redirect'])); 
) else { 
$ this -> redirect( $ this -> url -> link('affiliate/account', '', 'SSL')); 


$ this 一 > data[ 'breadcrumbs'] = array(); 


$ this —>data['breadcrumbs'][] = array( 
"text" => $ this- > language -> get('text home'), 

‘href! => $ this -> url -> link('common/hone'), 
'separator' => false 


) 


$ this 一 > data[ 'breadcrumbs'][] = array( 


"text" => $this- » language -> get('text account'), 
"href' => $this-»url-»link('affiliate/account', '', 'SSL'), 
‘separator’ => $ this -> language -> get('text separator!) 
); 
$ this -> data['breadcrumbs'][] = array( 
'text' => $this-» language -> get('text login'), 
'href' => $this-»url-»link('affiliate/login', '', 'SSL'), 


'separator' => $ this -> language -> get('text separator') 
); 


$ this -> data[ 'heading_title'] = $this- language -»get('heading title'); 


$ this - > data[ 'text_description'] = sprintf ( $ this - > language - > get ( ' text _ 
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description'), $ this—>config—>get('config name'), $ this—>config—>get('config name'), 
$ this — > config-» get('config commission') . '&'); 
$this-»data['text new affiliate'] = $ this—> language -> get('text new affiliate'); 
$ this- > data['text register account'] = $ this -> language - > get('text register _ 
account’) ; 
$ this - > data['text returning affiliate'] = $ this - > language - > get ( 'text_ 
returning affiliate’); 
$this-»data['text i am returning affiliate'] = $ this—> language —>get('text_i_ 
am returning affiliate'); 
$this-»data['text forgotten'] = $ this -> language- » get('text forgotten'); 


$this-»data['entry email'] = $ this—> language -> get('entry email'); 
$this-»data['entry password'] = $ this -> language -> get('entry password'); 


$ this -> data['button continue'] = $ this -> language -> get('button continue'); 
$this-»data['button login'] = $ this -> language -> get('button_login'); 


if (isset( $ this 一 > error[ 'warning'])) { 

$this-»data['error warning'] = $ this- > error[ 'warning']; 
} else { 

$this-»data['error warning'] = ''; 


$this-»data['action'] = $this-»url-»link('affiliate/login', '', 'SSL'); 
$this-»data['register'] = $this-»url-»link('affiliate/register', '', 'SSL'); 
$this-»data['forgotten'] = $this-»url-» link('affiliate/forgotten', '', 'SSL'); 


if (isset( $ this -> request - > post[ 'redirect'])) { 
$this-»data['redirect'] = $ this -> request -> post[ 'redirect']; 

) elseif (isset( $ this -> session -> data[ 'redirect'])) { 

$ this 一 > data['redirect'] = $ this -> session-  data['redirect']; 


unset( $ this -> session - > data[ 'redirect']); 
} else { 
$this-»data['redirect'] = ''; 


if (isset( $ this -> session -> data[ 'success'])) { 
$ this—>data['success'] = $ this- > session -> data['success']; 


unset( $ this -» session — > data[ 'success']) ; 
} else { 
$ this —>data['success'] = ''; 


if (file exists(DIR TEMPLATE . $ this — > config — > get('config template') . '/template/ 
affiliate/login. tpl')) { 
$ this -> template = $ this -> config -— > get('config template') . '/template/ 
affiliate/login. tpl'; 
} else { 
$ this—> template = 'default/template/affiliate/login. tpl'; 


$this-» children = array( 
'common/column left', 
'common/column right', 
'common/content top', 
‘common/content_bottom', 
‘common/footer', 
‘common/header' 


); 
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$ this -> response - > setOutput( $ this 一 > render()); 


private function validate() ( 


if (! $ this - » affiliate- ^ login( $ this -> request - > post['email'], $ this -> request - > 


post[ 'password'])) ( 


$this-»error['warning'] = $ this- > language -> get('error login'); 


if (! $ this-> error) { 
return true; 

} else { 
return false; 


} 
? 
用 户 登录 页 面 效 果 如 图 12.4 所 示 。 
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用 户 登录 页 面 效 果 
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12.2.3 浏览 商品 


浏览 商品 功能 主要 由 category. php、product. php 和 search. php、review. php 等 几 个 页 
面 组 成 ,可 以 按 分 类 的 方式 查看 对 应 的 商品 列表 ,并 从 中 选择 希望 购买 的 商品 。 用 户 也 可 以 
通过 reviews. php 执行 查看 和 提交 商品 评价 的 功能 ,顾客 在 购物 完成 后 还 可 以 在 商品 下 添 
加 相应 的 评语 和 评分 。 

下 面 列 出 的 是 category. php 的 源码 ,从 中 可 以 看 到 如 何 根据 分 类 与 商品 的 关系 获取 某 
分 类 下 的 特定 商品 列表 等 逻辑 的 具体 实现 。 

[B] 12.3] category. php 的 源码 。 


<?php 
class ControllerProductCategory extends Controller { 
public function index() { 
$ this —> load language( 'product/category'); 


$ this —> load- > model('catalog/category'); 
$ this — > load- > model ( 'catalog/product') ; 
$ this — > load- > model('tool/ image") ; 


if (isset( $ this -> request - » get[ 'sort'])) { 
$sort = $this- » request -> get[ 'sort']; 
) else ( 
$ sort = 'p.sort order'; 


) 


if (isset( $ this -> request - » get[ 'order'])) { 
$order = $this-» request -> get[ 'order']; 
) eise ( 
$order = 'ASC'; 
} 


if (isset( $ this -> request -> get[ 'page'])) { 
$page = $this- » request - » get[ 'page']; 
) else ( 
$ page = 1; 
} 


if (isset( $ this -> request -> get[ 'linit'])) { 
$ limit = $ this-> request -> get[ 'limit']; 
} else { 
$ limit = $this-»config-» get('config catalog limit!'); 


} 
$ this -> data[ 'breadcrumbs'] = array(); 
$ this -> data[ 'breadcrumbs'][] = array( 


"text! => $ this —> language — > get( 'text_home'), 
‘href! => $ this -> url -> link('common/home'), 
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'separator' => false 
); 


if (isset( $ this -> request -> get[ 'path'])) { 
$path = ''; 


$ parts = explode(' ', (string) $ this -> request - » get[ 'path']); 


foreach ( $ parts as $ path id) { 
if (! $ path) ( 
$path = $ path id; 
) eise( 
$path.- ' '. $path id; 
} 
$ category info = $ this—>model_catalog_category~—> getCategory( $ path id); 
if ( $ category info) { 
$ this -> data['breadcrumbs'][] = array( 
"text" => $category_info[ 'name'], 


"href' => $this-»url-»link('product/category', 'path- '. 
$ path), 


'separator' => $ this- > language - > get('text separator') 


$ category_id = array pop( $ parts); 
) eise ( 


$ category id 


0; 


$ category info = $ this- > model catalog category - > getCategory( $ category id); 
if ($ category info) ( 
if(isset( $ category info['meta title'])&& $ category info['meta title']!- '') 


$ this -> document — > setTitle( $ category info['meta title']); 
else 


$ this - > document - > setTitle( $ category info[ 'name']) ; 


$ this -> document - > setDescription( $ category info['meta description']); 
$ this — > document 一 > setKeywords( $ category info['meta keyword']); 


$this-»data['heading title'] = $category info['name']; 


$this-»data['text compare'] = sprintf( $ this -> language - » get('text_compare'), 
(isset( $ this -> session -> data[ 'compare']) ? count( $ this - > session- 一 > data['compare']) : 


0)); 


if ( $ category info['image']) { 
$ this -> data[ 'thumb'] = $ this- > model tool image -> resize( $ category 
info['image'], $ this—>config—>get('config_image_category_width'), $ this —» config -» get 
('config image category height')); 
) eise( 
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$ this -> data[ 'thumb'] = ''; 


$ this -> data[ 'description'] = html entity decode( $ category_info[ 'description'], 


ENT QUOTES, 'UTF- 8"); 


$this-»data['compare'] = $this-»url-» link('product/compare'); 


$url ="; 


if (isset( $ this -> request —>get['sort'])) { 
$url.- '&sort-'. $this-» request - » get[ 'sort']; 


} 


if (isset( $ this—> request - » get[ 'order'])) { 
$url.= 'Sorder='. $this-» request -> get[ 'order']; 


if (isset( $ this 一 > request - » get[ 'limit'])) { 
$url.- '&limit-'. $this-» request -> get[ 'linit']; 


} 


$ this -> data['categories'] = array(); 


$ results = $this-» model catalog category -> getCategories( $ category id); 


foreach ( $ results as $ result) ( 


$ product total 


= $this- > model catalog product - > getTotalProducts 


(array('filter category id' => $ result['category id'])); 


$this-»data['categories'][] = array( 


request 一 > get[ 'path'] 
) 
} 


‘name' => $result['name'] . '('. $ product total. ')', 


‘href! => $this-» url-» link('product/category', 'path- '. 


''. $result['category id']. $ url) 


$ this —>data[ 'products'] = array(); 


$data = array( 
'filter category id' => $ category id, 


$this-» 


‘sort’ => $ sort, 

‘order’ => $ order, 

'start' =>($page - 1) * $ limit, 
‘limit' => $ limit 


); 


$ product total = $ this 一 > model catalog product — > getTotalProducts( $ data); 


$ results = $ this -> model catalog product — > getProducts( $ data); 


foreach ( $ results as $ result) ( 
if ($ result['image']) ( 


$ image 


$this- > model tool image - > resize( $ result[ 'image'], 


$ this - > config -> get('config image product width'), $ this -> config- > get('config image 
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product height')); 
} else { 
$ image = $ this—>model_tool_image—>resize('no_image. jpg’, $ this 一 > 
config-» get( 'config_image_product_width'), $ this 一 > config 一 > get('config image product | 
height')); 


) 
if (( $ this-» config-» get('config customer price') && $ this -> customer 一 > 
isLogged()) || ! $ this- » config 一 > get('config customer price')) { 
$price = $ this - > currency - > format( $ this - > tax — > calculate 
($result['price'], $result['tax class id'], $ this - » config- » get('config tax'))); 
) eise( 
$ price - false; 
) 
if ((float) $ result['special']) ( 
$ special = $ this - > currency - > format( $ this — > tax - > calculate 
(S$result['special'], $ result['tax class id'], $ this 一 > config - » get('config tax'))); 
) else { 


$ special = false; 
) 


if ( $ this -> config -> get('config tax')) { 
$tax = $this- > currency - > format ( ( float) $ result[ 'special'] ? 
$ result['special'] : $ result['price']); 
} else { 
$ tax = false; 


if ( $ this -> config - > get( 'config_review_status')) { 
$ rating = (int) $ result['rating']; 

} else { 
$ rating = false; 

) 


$ this -> data['products'][] = array( 
'product id' => $ result['product id'], 
"thumb" -» $ image, 
"name" => $ result['name'], 
‘description’ = > truncate(strip tags(html entity decode( $ result 
['description'], ENT QUOTES, 'UTF-8')), 200) . ' 





‘price’ => $ price, 

‘special’ => $ special, 

"tax' => $ tax, 

"rating! => $ result[ 'rating'], 

'reviews" => sprintf( $ this - > language - > get('text reviews'), 
(int) $ result['reviews']), 

"href" => $this—> url -> link('product/product', 'path='. 
$ this - > request —>get['path'] . '&product_id='. $ result['product id']) 


); 
} 


$url = ''; 
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if (isset( $ this» request -> get[ 'limit'])) { 


$url.- '&limit-'. $this-» request - » get[ 'limit']; 


$this-»data['sorts'] = array(); 


$this-»data['sorts'][] = array( 


'text' => $this-» language -> get('text default'), 


'value' => 'p.sort order - ASC', 


‘href! => $ this -> url- > link( 'product/category', 
request —>get['path'] . '&sort = p.sort order&order- ASC'. $ url) 


); 


$this-»data['sorts'][] = array( 
"text" 
'value' => 'pd. name - ASC', 





'href' => $ this -> url -> link( 'product/category', 
request -> get['path'] . '&sort = pd. name&order = ASC'. $ url) 


E 


$this-»data['sorts'][] = array( 


'text' => $ this -> language -> get('text name desc'), 


'value' => 'pd.name - DESC', 


'href' => $ this -> url -> link( 'product/category', 
request 一 > get['path'] . '&sort = pd. name&order = DESC'. $ url) 


); 


$this-»data['sorts'][] = array( 


"text! => $this-» language -> get('text price asc'), 


'value' => 'p. price- ASC', 


‘href' => $ this -> url -> link( 'product/category', 
request -> get['path'] . '&sort = p.price&order = ASC'. $ url) 


) 


$this-»data['sorts'][] = array( 


'text' => $ this -> language -> get('text price desc'), 


'value' => 'p. price - DESC', 


'href' => $ this -> url- > link( 'product/category', 
request —>get['path'] . '&sort = p. price&order = DESC'. $ url) 


); 


$ this -> data[ 'sorts'][] = array( 


> $ this -> language -> get('text name asc'), 


'path = 


'path = 


'path = 


'path = 


'path = 


'text' => $ this—> language -» get('text rating desc'), 


'value' => 'rating- DESC', 


"href! => $ this -> url- > link('product/category', ‘path = 


request -> get['path']. '&sort- rating&order- DESC’. $ url) 


) 


$ this -> data[ 'sorts'][] = array( 


"text' => $ this—> language 一 > get('text rating asc'), 


‘value’ 

‘href' 

request —>get['path'] . '&sort- rating&order = ASC'. 
E 


'rating- ASC', 





$ url) 


$ this -> url- > link('product/category', 'path- 


$ this - > 


$ this - > 


$ this- > 


$ this -> 


$ this -> 


$ this - > 


$ this - > 
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$this-»data['sorts'][] = array( 
'text' => $ this- > language -> get('text model asc'), 
'value' => 'p. model- ASC', 
‘href! => $this-» url- » link('product/category', 'path- '. $this-» 
request —>get['path'] . '&sort- p.model&order- ASC'. $ url) 
); 


$this-»data['sorts'][] = array( 
'text' => $ this —> language -» get('text model desc'), 
'value' => 'p. model ~ DESC', 
'href' => $ this -> url- > link('product/category', 'path- '. $this-» 
request 一 > get['path'] . '&sort = p. model&order = DESC'. $ url) 
) 


$url ="; 


if (isset( $ this 一 > request - » get['sort'])) { 
$url.= '&sort-'. $this-» request - » get[ 'sort']; 


if (isset( $ this 一 > request -> get[ 'order'])) { 
$url.- '&order- '. $ this—> request -> get[ 'order']; 


$this-»data['limits'] = array(); 


$this-»data['limits'][] = array( 
"text! => $this-» config-» get('config catalog limit'), 
'value' => $this-» config 一 > get('config catalog limit'), 
‘href' => $ this -> url -> link('product/category', 'path- '. $this-» 
request- »get['path']. $url. '&limit- '. $this-»config-»get('config catalog limit')) 
) 


$this-»data['limits'][] = array( 


"text' => 25, 
'value' => 25, 
'href' => $ this -> url -> link('product/category', 'path='. $this-> 


request —>get['path'] . $url. '&limit = 25") 
) 


$this-»data['limits'][] = array( 


"text! => 50, 
'value' => 50, 
"href' => $ this -> url -> link('product/category', 'path- '. $this-» 


request-»get['path']. $url. '&limit = 50") 
); 


$this-»data['limits'][] = array( 
'text' => 75, 
'value' => 75, 
'href' => $ this -> url- > link('product/category', 'path- '. $this-» 
request —>get['path'] . $url. '&limit- 75!) 
E 
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$this-»data['limits'][] = array( 
"text' => 100, 
'value' => 100, 
‘href’ => $ this —> url — > link( 'product/category', ‘path = 


request —>get['path'] . $url. '&limit- 100") 


); 
$url = "'; 


if (isset( $ this—> request —» get[ 'sort'])) { 
$url.- '&sort-'. $this-» request - » get[ 'sort']; 


} 


if (isset( $ this -> request -> get[ 'order'])) { 
$url.- '&order- '. $this- » request -> get[ 'order']; 


) 


if (isset( $ this -> request -> get[ 'limit'])) { 
$url.- '&limit-'. $this-» request - » get[ 'limit']; 
) 


$ pagination - new Pagination(); 

$ pagination-» total = $ product total; 
$ pagination- » page = $ page; 
$pagination-» limit = $ limit; 


"o §$this-> 


$ pagination-» text = $ this—> language -» get('text pagination'); 
$ pagination-» url = $ this-> url- » link('product/category', 'path- '. $this-» 


request -> get['path']. $url. '&page- {page}'); 


$ this —>data['pagination'] = $ pagination -> render(); 
$this-»data['sort'] = $ sort; 

$this-»data['order'] = $ order; 
$this-»data['limit'] = $ limit; 


$ this —>data['continue'] = $ this -> url -> link('common/home') ; 


if (file exists(DIR_TEMPLATE . $ this—> config -> get('config template') 


product/category. tpl')) { 


$ this -> template = $ this — > config — > get('config template') 


product/category. tpl'; 


} else { 
$ this -> template = 'default/template/product/category. tpl'; 


$this-»children = array( 
'common/column left', 
'common/column right', 
'common/content top', 
'common/content bottom', 
'comnon/£footer', 
'common/header' 


); 


. '/template/ 


. '/template/ 
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$ this - > response - > setOutput( $ this - » render()); 
} else { 
$url ="; 


if (isset( $ this -> request —>get['path'])) { 
$url . = '&path='. $this-» request -> get[ 'path']; 
) 


if (isset( $ this -> request -> get[ 'sort'])) ( 
$url.- 'S&sort='. $this-» request - » get[ 'sort']; 
) 


if (isset( $ this -> request -> get[ 'order'])) ( 
$url.= 'Sorder='. $ this—> request -> get[ 'order']; 


if (isset( $ this -> request - » get[ 'page'])) { 
$url.- '&page-'. $ this-> request - » get[ 'page']; 
i 


if (isset( $ this -> request -> get[ 'limit'])) { 
$url.- '&limit-'. $ this—> request -> get[ 'linit']; 
i 


$ this -> data[ 'breadcrumbs'][] = array( 
"text" => $this-» language -> get('text error'), 
"href" => $this-»url-» link('product/category', $url), 
'separator' => $ this- > language -> get('text separator!) 

E 


$ this 一 > document - > setTitle( $ this - > language - > get('text error')); 
$ this -> data['heading title'] = $ this- > language -> get('text error'); 
$this-»data['text error'] = $ this- > language -> get('text error'); 
$ this- > data[ 'button_continue'] = $ this- > language -> get('button continue'); 
$ this -> data['continue'] = $ this ->url-> link('common/home') ; 


if (file exists(DIR TEMPLATE . $ this—> config —> get('config template’) . '/template/ 
error/not found. tpl')) { 
$ this -> template = $ this — > config — > get('config template') . '/template/ 
error/not_found. tpl'; 
} else { 
$ this -> template = 'default/template/error/not_found. tpl'; 


$this-»children = array( 
'common/column left', 
'common/column right', 
'common/content top', 
'common/content bottom', 
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'comnon/footer', 
‘common/header' 


); 


$ this — > response - > setOutput( $ this -> render()); 


) 


?> 


浏览 商品 页 面 效 果 如 图 12. 5 所 示 。 
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图 12.5 浏览 商品 页 面 效 果 


12.2.4 购物 车 


购物 车 的 核心 功能 由 cart. php 完成 ,用 户 可 以 将 自己 喜欢 的 商品 暂 存 到 购物 车 中 ,最 
后 下 订单 完成 支付 。 


【 例 12.4】 cart. php 的 源 代码 。 
«?php 
class ControllerCheckoutCart extends Controller { 
public function index() { 
$ this — > load language( 'checkout/cart'); 


if ( $ this -> request — > server['REQUEST METHOD'] == 'POST')( 
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if (isset( $ this —» request — > post[ 'quantity'])) ( 
if (!is array( $ this -> request - » post[ 'quantity'])) { 
if (isset( $ this - > request — » post[ 'option'])) ( 
$ option = $ this -> request -> post[ 'option']; 
} else { 
$ option = array(); 


$ this -> cart — > add ( $ this — > request — > post['product id'], $ this 一 > 
request — > post['quantity'], $ option); 
} else { 
foreach ( $ this -> request -> post['quantity'] as $key => $ value) { 
$ this -> cart -> update( $ key, $ value); 
} 


if (isset( $ this 一 > request - > post[ 'remove'])) { 
foreach ( $ this - » request - » post[ 'remove'] as $ key) { 
$ this -> cart - > remove( $ key); 


} 


if (isset( $ this 一 > request - > post[ 'voucher']) && $ this- > request - » post[ 'voucher']) { 
foreach ( $ this - > request 一 > post[ 'voucher'] as $ key) ( 
if (isset( $ this -> session -> data[ 'vouchers'][ $ key])) { 
unset( $ this -> session — > data[ 'vouchers'][ $ key] ); 


if (isset( $ this -> request -> post[ 'redirect'])) { 
$ this -> session -> data['redirect'] = $ this -> request - > post[ 'redirect']; 


if (isset( $ this - > request - > post [ 'quantity']) || isset( $ this - > request 一 > 
post['remove']) || isset( $ this -> request -> post[ 'voucher'])) { 
unset( $ this - > session -> data[ 'shipping methods']); 
unset( $ this -> session - » data[ 'shipping method']); 
unset( $ this - > session- > data[ 'payment_methods']) ; 
unset( $ this - > session- > data[ 'payment method']); 
unset( $ this -> session -> data[ 'reward']) ; 


$ this -> redirect( $ this -> url -> link( 'checkout/cart')) ; 


if (isset( $ this — » request —> get[ 'remove'])) ( 
$ this 一 > cart -> remove( $ this - > request - > get[ 'remove']) ; 


$ this —> redirect( $ this - » url -> link('checkout/cart')); 
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$ this — > document - > setTitle( $ this — > language - > get( 'heading title')); 
$ this -> data['breadcrumbs'] = array(); 


$ this 一 > data['breadcrumbs'][] = array( 


"href" => $this-»url-» link( 'common/home'), 
"text" => $this-» language -> get('text home'), 
'separator' => false 

i 

$ this -> data[ 'breadcrumbs'][] = array( 

"href" => $this-»url-» link('checkout/cart'), 
"text" => $this- » language - > get('heading title'), 


'separator' => $ this -> language - > get('text separator') 
); 


if ($this—->cart—>hasProducts() || (isset( $ this -> session - > data[ 'vouchers']) && 
$ this -> session -> data[ 'vouchers'])) { 
$ this—>data['heading_title'] = $ this- > language -> get('heading title'); 


$this-»data['text select'] = $ this -> language -> get('text select'); 
$this-»data['text weight'] = $ this -> language -> get('text_weight'); 


$ this -> data['column remove'] = $ this -> language -> get('column remove'); 

$ this- > data[ 'column_image'] = $ this- > language -> get('column_image'); 

$ this -> data[ 'column_name'] = $ this- > language -> get('column name'); 

$ this -> data['column model'] = $ this- > language -> get('column model'); 

$ this —>data['column_quantity'] = $ this- > language -> get('column_quantity'); 
$this-»data['column price'] = $ this-> language -> get('column price'); 

$ this- > data['column total'] = $ this- > language -> get('column total'); 


$ this -> data[ 'button_update'] = $ this -> language - > get('button update'); 
$ this -> data[ 'button_shopping'] = $ this- > language -> get('button shopping!); 
$ this — > data[ 'button checkout'] $ this — > language - > get('button checkout'); 


if ( $ this -> config- > get('config customer price') && ! $ this - > customer - > 
isLogged()) { 
$ this —> data[ 'attention'] = sprintf( $ this -> language- > get('text login'), 
$ this» url-» link('account/login'), $ this- » url -> link('account/register')); 
} else { 
$this-»data['attention'] = ''; 


$this-»data['action'] = $this-»url-» link('checkout/cart'); 


if ( $ this —> config -> get('config cart weight')) { 
$this-»data['weight'] = $ this—> weight -> format( $ this -> cart -> 
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getWeight(), $ this- > config—>get('config weight class id'), $ this- > language - > get 
('decimal point'), $ this —> language —> get( ‘thousand point')); 
} else { 
$ this -> data[ 'weight'] = false; 
) 


$ this - > load- > model ('tool/image') ; 
$ this—> data[ 'products'] = array(); 


foreach ( $ this -> cart- > getProducts() as $ result) { 
if ( $ result['image']) ( 
$ image = $this -> model tool image - > resize( $ result[ 'image'], 
$this-»config-»get('config image cart width'), $ this - » config - »get('config image cart 
.height')); 
} else { 
$ image = ''; 


$ option_data = array(); 


if ( $ result['minimum'] > $ result['quantity']) { 
$ this -> session->data['error'] = sprintf( $ this -> language -> get(" 
error minimun'), $ result['name'], $ result[ 'minimum']) ; 


} 


foreach ( $ result['option'] as $ option) { 
if ( $ option['type'] != 'file') ( 
$ option_data[] = array( 
'name' => $ option[ 'name'], 
'value' = > (strlen( $ option[ 'option value']) > 20 ? substr 
( $ option['option value'], 0, 20) . '..': $ option[ 'option_value']) 
E 
} else { 
$ this — > load- > library( 'encryption'); 


$ encryption = new Encryption( $ this — > config — > get(''config 
encryption')); 


$ file = substr( $ encryption - > decrypt( $ option['option value']), 0, 
strrpos( $ encryption - > decrypt( $ option[ 'option value']), '.')); 


$ option data[] = array( 
'name' => $ option| 'name'], 
'value' => (strlen( $ file) > 20 ? substr( $ file, 0, 20) . '..': 
$ file) 


if (( $ this -> config -> get('config customer price') && $ this - > customer 一 > 
isLogged()) || ! $ this- » config- » get('config customer price')) { 
$price = $this - > currency - > format( $ this - > tax - > calculate 
( $ result['price'], $result['tax class id'], $ this- » config- > get('config tax'))); 
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} else { 
$ price = false; 


if (( $ this- > config — > get('config customer price') && $ this- > customer 一 > 
isLogged()) || ! $ this—>config—>get('config_customer_price')) { 
$total = $ this - > currency - > format( $ this - > tax - > calculate 
($result['total'], $ result['tax_class_id'], $ this- » config- > get('config_tax'))); 
} else { 
$ total = false; 





} 
$ this — > data[ 'products'][] = array( 
"key" => $ result['key'], 
‘thumb! => $ image, 
‘name’ => $result['name'], 
'model' => $result[ 'model'], 
‘option’ => $ option_data, 
'quantity' => $ result[ 'quantity'], 
'stock" => $result['stock'], 


'points' => ($result['points'] ? sprintf( $ this - > language - > get 
('text points'), $ result['points']) : ''), 


'price" => $ price, 
"total' -» $total, 

'remove' => $this 一 > url 一 > link('checkout/cart', 'remove='. $ result['key']), 
"href* 


=> $this-» url-» link('product/product', 'product id-'. 
$ result['product id']) 


); 
} 


// Gift Voucher 
$this-»data['vouchers'] = array(); 


if (isset( $ this — > session - > data[ 'vouchers']) && $ this -> session - > data 
['vouchers']) { 


foreach ( $ this -> session- > data[ 'vouchers'] as $key => $ voucher) { 
$ this -> data['vouchers'][] = array( 
'key" => $key, 
'description' => $ voucher[ 'description'], 


"amount" => $ this -> currency - » format( $ voucher[ 'amount']) 


); 


$total data = array(); 
$ total = 0; 


$ taxes = $this-»cart-»getTaxes(); 


if (( $ this -> config — > get('config customer price') && $ this - > customer - > 
isLogged()) || ! $ this -> config-> get('config customer price')) { 


$ this -> load -> model('setting/extension'); 


$ sort_order = array(); 


98123: ”PHP 动态 网 站 设计 实例 


$ results = $this-»model setting extension- > getExtensions('total'); 


foreach ($ results as $key => $value) { 
$ sort_order[ $key] = $ this—>config—>get( $ value['code'] . '_sort_ 
order'); 
} 


array_multisort( $ sort_order, SORT_ASC, $ results); 


foreach ( $ results as $ result) { 
if ( $ this—>config->get( $ result['code'] . ' status')) { 
$ this -> load- > model('total/'. $ result['code']); 


$this-»('model total '. $ result['code']} -> getTotal( $ total 
data, $total, $ taxes); 
} 


$ sort_order = array(); 


foreach ($ total data as $key => $value) { 
$ sort_order[ $key] = $ value['sort_order']; 
} 


array_multisort( $ sort_order, SORT_ASC, $ total_data); 


$this-»data['totals'] = $total data; 


// Modules 
$this-»data['modules'] = array(); 


if (isset( $ results)) ( 
foreach ( $ results as $ result) { 
if ( $ this—>config->get( $ result['code'] . ' status') && file exists 
(DIR APPLICATION . 'controller/total/'. $result['code']. '.php')) { 
$ this -> data[ 'modules'][] = $ this—>getChild('total/'. $ result 
['code']); 


if (isset( $ this -> session -> data[ 'redirect'])) ( 
$ this -> data[ 'continue'] = $ this-» session-  data['redirect']; 


unset( $ this -> session -> data[ 'redirect']); 
} else { 

$ this -> data[ 'continue'] = 5$this 一 >url 一 > link('common/home'); 
} 


if (! $ this -> cart -> hasStock() && (! $ this -> config -> get('config stock checkout') | | 
$ this — > config -> get('config stock warning'))) { 
$ this —>data['error_warning'] = $ this- » language -> get('error_stock") ; 
} elseif (isset( $ this -> session- » data[ 'error'])) ( 
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$this-»data['error warning'] = $this-» session- > data[ 'error']; 


unset( $ this -> session- > data[ 'error']); 
) eise ( 
$this-»data['error warning'] = ''; 


if (isset( $ this -> session -> data[ 'success'])) { 
$ this ->data['success'] = $ this -> session- > data[ 'success']; 


unset( $ this -> session- > data[ 'success']) ; 
} else ( 
$this-»data['success'] = ''; 





} 
$ this -> data['checkout'] = $ this—> url- > link('checkout/checkout', '', 'SSL'); 


if (file exists(DIR TEMPLATE . $ this—> config -> get('config template') . '/template/ 
checkout/cart. tpl')) { 
$ this -> template = $ this — > config- > get('config template') . '/template/ 
checkout/cart. tpl'; 
} else { 


$ this -> template = 'default/template/checkout/cart. tpl'; 
} 


$this 一 > children = array( 
'common/column left', 
'common/column right', 
'common/content top', 
'common/content bottom', 
‘common/footer', 
‘common/header' 

) 


$ this - > response - > setOutput( $ this -> render()); 
) eise ( 


$ this -> data['heading title'] = $ this- > language -> get('heading title'); 
$this-»data['text error'] = $ this- > language -> get('text empty'); 
$this-»data['button continue'] = $ this-> language -> get( 'button_continue') ; 
$this-»data['continue'] = $ this- >url-> link('common/home'); 


if (file exists(DIR TEMPLATE . $ this -> config -> get('config template') . '/template/ 
error/not found.tpl')) { 


$ this -> template = $ this -> config- > get('config template') . '/template/ 
error/not found. tpl'; 
) eise( 
$ this-> template = 'default/template/error/not found. tpl'; 


$this-» children = array( 
'common/column left', 


); 
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'common/column right', 
'common/content top', 
'common/content bottom', 
‘common/footer', 
‘common/header' 


$ this -> response - > setOutput( $ this - » render()) ; 


public function update() { 
$ this — > language - > load( 'checkout/cart') ; 


$ json 


= array(); 


if (isset( $ this -> request -> post[ 'product id'])) { 
$ this — > load- > model('catalog/product'); 


$ product info = $ this - > model catalog product - > getProduct( $ this - > 


request 一 > post[ 'product id']); 


if ( $ product info) { 


// Minimum quantity validation 
if (isset( $ this - » request - » post[ 'quantity'])) ( 

$ quantity = $ this -> request - » post[ 'quantity']; 
} else { 

$ quantity = 1; 


$ product_total = 0; 


foreach ( $ this -> session -> data['cart'] as $key => $ value) { 
$ product = explode(':', $key); 


if ( $ product[0] == $this-» request - » post['product id']) { 
$ product total += $ value; 


if ( $ product info['minimum'] > ( $ product total + $ quantity)) { 
$ json['error']['warning'] = sprintf( $ this -> language - > get('error_ 


minimun'), $ product info['name'], $ product info['minimun']); 


) 


// Option validation 
if (isset( $ this -> request -> post[ 'option'])) ( 

$ option = array filter( $ this — » request — > post[ 'option']); 
) eise( 

$option - array(); 


$ product options = $ this — model catalog product - > getProductOptions 


( $ this - > request — > post[ product id']); 
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foreach ( $ product options as $ product option) ( 
if ( $ product option[ 'required'] && (! isset( $ this — > request - > post 
['option'][ $ product option['product option id']]) || ! $ this - > request - > post[ 'option'] 
[ $ product option['product option id']])) ( 
$ json['error'][ $ product option['product option id']] = sprintf 
( $ this -> language -» get('error required'), $ product option['name']); 
) 
} 


if (!isset( $ json['error'])) { 
$ this -> cart - > add( $ this - > request 一 > post['product id'], $ quantity, 
$ option) ; 


$ json[ 'success'] = sprintf( $ this - > language - > get('text success'), 
$ this —> url -> link('product/product', 'product id $ this - > request - > post[ 'product_ 
id']), $ product info['name'], $ this -> url —> link('checkout/cart')) ; 





unset( $ this - > session — > data[ 'shipping methods']); 
unset( $ this -> session -> data[ 'shipping_method']) ; 
unset( $ this -> session -> data[ 'payment_methods']) ; 
unset( $ this -> session — > data[ 'payment method']); 


} else { 
$ json['redirect'] = str replace('&amp;', '&', $this-»url-»link('product/ 
product', 'product_id='. $ this - > request -> post['product id'])); 


i 
} 


if (isset( $ this -> request - > post[ 'remove'])) { 
$ this -> cart - > remove( $ this - > request — > post[ 'remove']) ; 
} 


if (isset( $ this -> request - > post[ 'voucher'])) { 
if ( $ this -> session - » data[ 'vouchers'][ $ this — > request — > post[ 'voucher']]) ( 
unset( $ this — > session - > data[ 'vouchers'][ $ this - > request - > post 
['voucher']]); 
) 
} 


$ this -> load — > model ( 'tool/image') ; 
$ this -> data[ 'text_empty'] = $ this -> language -> get('text empty'); 


$ this - > data[ 'button_checkout'] = $ this -> language -> get('button checkout'); 
$this-»data['button remove'] = $ this -> language -»get('button remove'); 


$ this -> data[ 'products'] = array(); 


foreach ( $ this 一 > cart -> getProducts() as $ result) { 
if ( $ result['image']) { 
$ image = $this-» model tool image- » resize( $ result['image'], 40, 40); 
) eise( 
$ image = "'; 
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$ option data = array(); 


foreach ( $ result['option'] as $ option) { 
if ( $ option[ 'type'] "file') { 
$ option_data[] = array( 
"name' => $ option[ 'name'], 
‘value’ => (strlen( $ option['option value']) > 20 ? substr( $ option 
['option value'], 0, 20) . '..': $ option[ 'option_value']) 
E 
} else { 
$ this - > load 一 > library( 'encryption'); 





$ encryption = new Encryption( $ this - > config - > get ( 'config | 
encryption')); 


$ file = substr( $ encryption- > decrypt( $ option['option value']), 0, 
strrpos( $ encryption -> decrypt( $ option[ 'option value']), '.')); 


$ option data[] = array( 
'name' => $ option[ 'name'], 
'value' => (strlen( $ file) > 20 ? substr( $file, 0, 20). '..': 
$ file) 


if (( $ this -> config —> get('config customer price') && $ this - > customer - > 
isLogged()) || ! $ this -> config-» get('config customer price')) { 
$ price = $this-»currency- » format( $ this - > tax - » calculate( $ result 
['price'], $result['tax class id'], $ this- > config- > get('config tax'))); 
} else { 
$ price = false; 


if (( $ this -> config — > get('config customer price') && $ this -> customer — > 
isLogged()) || ! $ this- » config- » get('config customer price')) { 
$ total = $this-»currency- » format( $ this - > tax - > calculate( $ result 
['total'], $result['tax class id'], $ this -> config- » get('config tax'))); 
) else { 
$ total = false; 


} 

$ this -> data[ 'products'][] = array( 
'key' => $ result['key'], 
"thumb' -» $ image, 
'name" => $result['name'], 
"model" => $result['model'], 
'option' => $ option data, 
'quantity' => $ result['quantity'], 
"stock" => $ result['stock'], 
‘price’ => $ price, 


‘total’ => $ total, 
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'href' => $ this -> url- > link('product/product', 'product id- '. 
$ result['product id']) 
E 
} 


// Gift Voucher 
$ this —>data[ 'vouchers'] = array(); 


if (isset ( $ this — > session - > data[ 'vouchers']) && $ this — > session - > data 
[ 'vouchers']) { 
foreach ( $ this -> session- > data['vouchers'] as $key => $ voucher) { 
$ this -> data['vouchers'][] = array( 


‘key’ => $key, 
'description' => $ voucher[ 'description'], 
‘amount! => $ this -> currency - > format( $ voucher[ 'amount']) 


); 
} 


// Calculate Totals 

$ total_data = array(); 

$ total = 0; 

$ taxes = $ this—>cart—>getTaxes(); 


if (( $ this - > config — > get('config customer price') && $ this - > customer - > 
isLogged()) || ! $ this- > config-> get('config_customer_price')) { 
$ this -> load- » model('setting/extension'); 
$ sort_order = array(); 


$ results = $ this->model_setting_extension 一 > getExtensions( 'total'); 


foreach ( $ results as $key => $ value) { 
$ sort_order[ $ key] = $ this->config->get( $ value['code'] . ' sort order 


array_multisort( $ sort_order, SORT_ASC, $ results); 


foreach ( $ results as $ result) { 
if ( $ this -> config- >get( $ result['code'] . '_status')) { 
$ this -> load- > model('total/'. $ result['code']); 


$ this-»('model total '. $ result['code']) - > getTotal( $ total data, 
$total, $ taxes); 
) 


$sort order = array(); 
foreach ($ total data as $key => $ value) { 


$sort order[ $key] = $ value['sort order']; 
} 
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array multisort( $ sort order, SORT ASC, $ total data); 


$ json['total'] = sprintf( $ this -> language -> get('text items'), $this-»cart-» 
countProducts() + (isset( $ this -> session -> data[ 'vouchers']) ? count( $ this -> session- ^» 
data['vouchers']) : 0), $ this-> currency -> format( $ total)); 


$this-»data['totals'] = $total data; 


$this-» data['checkout'] = $this-»url-» link('checkout/checkout', '', 'SSL'); 


if (file exists(DIR TEMPLATE . $this- > config — > get('config template') . '/template/ 
common/cart.tpl')) ( 


$ this -> template = 


$ this - > config — > get('config template') . '/template/ 
common/cart. tpl'; 
} else { 
$ this -> template = 'default/template/common/cart. tpl'; 
} 


$ json['output'] = $ this-> render(); 


$ this -> load -> library('json'); 


$ this -> response - > setOutput(Json: :encode( $ json) ); 
} 


?> 


购物 车 页 面 效 果 如 图 12.6 所 示 。 
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图 12.6 购物 车 页 面 效果 
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12.2.5 下 单 


所 谓 下 单 即 完成 商品 购买 的 过 程 ,系统 会 自动 创建 相应 的 订单 页 面 ,用 户 确认 所 需 购买 
的 商品 同时 填写 送 货 地 址 等 信息 ,确认 并 进行 支付 后 即 可 完成 商品 购买 。 此 功能 由 
checkout. php,address. php, payment. php, confirmation. php, process. php 和 success. php 
等 多 个 PHP 页 面 组 成 ,其 中 ,checkout. php 主要 用 于 触发 购买 动作 ,address. php 供用 户 输 
入 送 货 地 址 信息 (或 直接 选取 常用 地 址 信息 ), payment. php 页 面 用 于 输入 支付 信息 ， 
confirmation. php 用 于 最 后 购买 前 的 确认 ,确认 后 所 有 信息 提交 给 process. php 进行 处 理 ， 
如 果 处 理 成 功 则 返回 success. php 给 用 户 。 

[B] 12.5] checkout. php 的 源 代码 。 


<?php 
class ControllerCheckoutCheckout extends Controller ( 
private $ direct payments = array('cod', 'cheque', 'free checkout', 'bank_transfer') ; 


public function index() { 
if (! $ this -> customer -> isLogged()) { 
$ this - > session -> data['redirect'] = $ this -> url- » link('checkout/checkout', '', 
'SSL'); 


$ this -> redirect( $ this -> url -> link('account/login', '', 'SSL')); 
} 
if ((! $ this- » cart —> hasProducts() && (! isset( $ this -> session — > data[ 'vouchers'] ) || 
! $ this -> session - > data[ 'vouchers'])) || (! $ this» cart -> hasStock() && ! $ this 一 > config -> 
get('config stock checkout'))) { 
$ this -> redirect( $ this -> url -> link('checkout/cart')); 
} 


if(!isset( $ this -> session -> data[ 'checkout_token'])) 
$ this -> session — > data[ 'checkout_token'] = md5(mt rand()); 


$ this - > log - > debug ( 'IlexDebug: : Begin Checkout : '. $ this - > session - > data 
['checkout token']); 


$ this — > load language( 'checkout/checkout') ; 
$ this -> document -> setTitle( $ this — > language - > get('heading title')); 


// Minimum quantity validation 
$ products = $this-»cart -> getProducts() ; 


foreach ( $ products as $ product) ( 
$ product total - 0; 


foreach ( $ this-» session —> data['cart']as $key => $ quantity) ( 
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$ product 2 = explode(':', $key); 


if ( $ product 2[0] == $ product['product id']) ( 
$ product total += $ quantity; 


if ( $ product[ 'minimum'] > $ product total) { 
$ this - > session- > data['error'] = sprintf( $ this - > language - > get 
('error minimum'), $ product['name'], $ product[ 'minimum']) ; 


$ this -> redirect( $ this — > url — > link( 'checkout/cart')) ; 


$ this -> data[ 'breadcrumbs'] = array(); 


$ this — > data['breadcrumbs'][] = array( 
'text' => $ this -> language — > get( 'text_home'), 
‘href! => $this-»url-» 1ink( 'common/home'), 
'separator' => false 


E 


$ this -> data['breadcrumbs'][] = array( 
"text" => $this- » language - > get('text cart'), 
‘href' => $ this -» url -» link('checkout/cart'), 
'separator' => $ this 一 > language -> get('text separator!) 
) 


$ this -> data[ 'breadcrumbs'][] = array( 
"text" => $this- » language - > get('heading title'), 
‘href' => $this-»url-»link('checkout/checkout', '', 'SSL'), 
'separator' => $ this 一 > language -> get( 'text_separator') 

) 


$this-»data['cart'] = $this-»url-» link('checkout/cart'); 
$this-»data['logged'] = $ this -> customer -> isLogged(); 

$ this -> data['shipping required'] = $ this—>cart—>hasShipping(); 
$ this — > datal 'has address'] = 1; 


if( $ this -> customer 一 > getAddressId())( 
$ this — > data[ 'shipping address']- $ this -> shipping address(); 
$ this -> data['shipping methods']- $ this -> shipping method(); 
Jeise( 
$ this -> data[ 'has address'] = 0; 
$ this -> data[ 'shipping_address'] = $ this -> shipping new address(); 
$this-»data['shipping methods']- $ this -> default shipping method(); 


308 
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$ this — > data[ 'paynent methods']- $ this — > payment nethod(); 


$ this — > data[ 'Pcomnent'] = ''; 
if (isset( $ this -> session - » data[ 'comment'])) ( 
$ this -> data[ 'comment'] = $ this 一 > session -> data[ 'comment']; 


$ results = $this-»model setting extension - »getExtensions('total'); 


// Modules 
$ this —>data[ 'modules'] = array(); 


if (isset( $ results)) { 
foreach ( $ results as $ result) ( 
if ( $ this-» config-»get( $ result['code']. ' status') && file exists(DIR- 


APPLICATION . 'controller/total/'. $ result['code'] . '.php')) { 


$ this - > data['modules'][] = $this-»getChild('total/'. $ result 


[ 'code']) ; 


$ this —>data[ 'modules'][] = $ this- »getChild( 'total/comment') ; 
$ this -> data['order confirm']- $ this -> confirm(); 
$this-»data['payment'] = $this-» payment(); 
$total data - array(); 
$total = 0; 
$ taxes = $this-»cart-»getTaxes(); 
$ this — > load- > model('setting/extension'); 
$sort order = array(); 
$ results = $this- model setting extension - > getExtensions('total'); 
foreach ($ results as $key => $ value) { 
$ sort_order[ $key] = $ this—>config—>get( $ value['code'] . '_sort_order'); 
array_multisort( $ sort_order, SORT_ASC, $ results); 
foreach ( $ results as $ result) { 


if ( $ this—>config->get( $ result['code'] . '_status')) { 
$ this -> load—>model('total/'. $ result[ 'code']) ; 
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$this—>{'model total '. $result['code']) - > getTotal( $ total data, 
$total, $ taxes); 
} 


$ sort_order = array(); 


foreach ($ total data as $key => $ value) { 
$ sort order[ $key] = $ value['sort order']; 


array multisort( $ sort order, SORT ASC, $ total data); 
$this-»data['totals'] = $ total data; 


if (file exists(DIR TEMPLATE . $ this — > config — > get('config template') . '/template/ 
checkout/checkout. tpl')) { 
$ this -> template = $ this -> config- > get('config template') . '/template/ 
checkout/checkout. tpl'; 
) else ( 
$this-» template = 'default/template/checkout/checkout. tpl'; 


$this-» children = array( 
'common/column left', 
'common/column right', 
'common/content top', 
'common/content bottom', 
‘common/footer', 
'common/checkout header' 


); 


$ this - > response - > setOutput( $ this - > render()); 


public function shipping address() { 
$ this -> load language( 'checkout/checkout') ; 


$ this — > load - > model( 'account/address') ; 
$ this—>data['type'] = 'shipping'; 


if (isset( $ this -> session- > data[ 'shipping_address_id'])) { 
$ this -> data['address_id'] = $ this- » session- > data['shipping address id']; 
$ this - > log - > debug ( 'IlexDebug:: session : '. $ this — > session - > data 
['shipping address id']); 
) eise ( 
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$this-»data['address id'] = $ this—> customer 一 > getAddressId(); 
$ this-» session — > data['shipping address id']- $ this —> data[ address id']; 
$ this -> log — > debug('IlexDebug:: default address id : '. $ this — > session- > 


data['shipping address id']); 
) 


$this-»data['addresses'] = $ this-— model account address -> getAddresses() ; 
$this-»data['country id'] = $this-»config-»get('config country id'); 

$ this -> load- > model( 'localisation/country'); 

$this-» data['countries'] = $ this—> model localisation country- » getCountries(); 

if (file exists(DIR TEMPLATE . $ this — > config — > get('config template') . '/template/ 


checkout/address. tpl')) ( 
$ this -> template = $ this -> config — > get('config template') . '/template/ 


checkout/address. tpl'; 
) eise ( 
$this-»template = 'default/template/checkout/address. tpl'; 


return $ this - » render(); 
private function shipping new address() ( 
$ this —> load language( 'checkout/checkout') ; 
$ this -> load - > model( 'account/address') ; 
$this-»data['type'] = 'shipping'; 
$this-»data['country id'] = $ this—>config-> get('config country id'); 
$ this — > load- > model( 'localisation/country'); 
$ this —> data[ 'countries'] = $ this—> model localisation country -> getCountries(); 
if (file exists(DIR TEMPLATE . $ this — > config — > get('config template') . '/template/ 
checkout/address new.tpl')) { 
$this-» template = 
checkout/address new.tpl'; 


} else { 
$this-» template = 'default/template/checkout/address new.tpl'; 


$ this - > config - > get('config template') . '/template/ 


return $ this -» render() ; 
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public function shipping method() { 
$ this -> load language( 'checkout/checkout'); 


$ this -> load - > model( 'account/address') ; 


if(isset( $ this -> session —> data['shipping address id'])) 
$ shipping address = $ this - > model account address - > getAddress( $ this - > 
session -> data['shipping address id']); 


else 
$ shipping address = $ this - > model account address - > getAddress( $ this - > 


customer 一 > getAddressId()); 


$this-»tax-» setZone( $ shipping address['country id'], $ shipping address['zone 
id']); 


if (!isset( $ this -> session- » data[ 'shipping methods'])) ( 
$quote data - array(); 


$ this -> load- » model('setting/extension'); 
$ results = $this-» model setting extension - > getExtensions( 'shipping'); 
foreach ( $ results as $ result) ( 

if ($ this -> config-» get( $ result['code'] . ' status')) ( 


$ this - » load- » model('shipping/'. $ result['code']); 


$ quote = $this-»('model shipping '. $result['code']) -> getQuote 
( $ shipping address); 


if ($ quote) ( 
$ quote data[ $ result['code']] = array( 
'title' => $quote[ 'title'], 
'quote' => $ quote[ 'quote'], 
‘description’ => $ quote[ 'description'], 
'sort order' => $quote['sort order'], 
'error' => $ quote[ 'error'] 


$sort order - array(); 


foreach ( $ quote data as $key => $ value) { 
$ sort_order[ $ key] = $ value['sort order']; 


array multisort( $ sort order, SORT ASC, $ quote data); 
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$ this—> session 一 > data[ 'shipping methods'] = $ quote data; 


if (isset( $ this 一 > session- > data['shipping methods']) && ! $ this -> session- » data 
['shipping methods']) { 
$this-»data['error warning'] = sprintf( $ this — > language - > get('error no. 
shipping'), $ this 一 > url- » link( 'information/contact')); 
) else ( 


$this-»data['error warning'] = ''; 


if (isset( $ this -> session -> data[ 'shipping methods'])) { 

$ this -> data['shipping methods'] = $ this -> session -> data['shipping methods']; 
} else { 

$ this -> data[ 'shipping_methods'] = array(); 


if (isset( $ this -> session- » data[ 'shipping method']['code'])) { 
$this-»data['shipping code'] = $ this -> session- » data['shipping method'] 
['code']; 
$ this - > customer - > setShippingMethod( $ this - > session - > data[ 'shipping_ 
method'][ 'code']) ; 
} else { 
$ this —>data['shipping_code'] = $ this- > customer —>getShippingMethod() ; 


$ shipping = explode('.', $ this —>data['shipping_code']); 
if(isset( $ shipping[0])&&isset( $ shipping[1]))( 
if(isset( $ this — > session - > data[ 'shipping methods'][ $ shipping[0]] 
['auote'][ $ shipping[1]])) 
$ this -> session- »data['shipping method'] = $ this -> session- » data 
['shipping_methods'][ $ shipping[0]][ 'quote'][ $ shipping[1]]; 
else 
$ this -> data[ 'shipping_code'] = ''; 


if (file exists(DIR TEMPLATE . $ this - > config — > get('config template') . '/template/ 
checkout/shipping. tpl')) { 
$ this -> template = $ this -> config -> get('config template') . '/template/ 
checkout/shipping. tpl'; 
} else { 
$ this -> template = 'default/template/checkout/shipping. tpl'; 


return $ this 一 > render(); 
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public function default shipping method() { 


id']); 


id']); 


$ this — > load language( 'checkout/checkout') ; 
$ shipping address['country id']- $ this -> config - » get('config country id'); 


$ shipping address['zone id'] = $ this -> config -> get('config zone id'); 
$ this -> tax 一 > setZone( $ shipping address['country id'], $ shipping address['zone 


$ this -> tax 一 > setZone( $ shipping address['country id'], $ shipping address['zone 


$ quote data - array(); 
$ this — > load - > model( 'setting/extension'); 
$ results = $this-» model setting extension - > getExtensions('shipping!); 
foreach ( $ results as $ result) ( 
if ( $ this -> config ->get( $ result['code'] . ' status')) ( 


$ this -> load -> model('shipping/'. $ result['code']); 


$ quote = $this- »('model shipping '. $result['code']) - > getQuote 


( $ shipping address); 


if ($ quote) ( 
$ quote data[ $ result['code']] = array( 


"title" => $quote[ 'title'], 

‘quote’ => $ quote[ 'quote'], 
‘description’ => $ quote[ 'description'], 

'sort order' => $quote['sort order'], 

'error' => $quote[ 'error'] 


) 


$sort order = array(); 
foreach ( $ quote data as $key => $ value) { 
$sort order[ $key] = $ value['sort order']; 
array multisort( $ sort order, SORT ASC, $ quote data); 
$ this-» session- » data['shipping methods'] = $ quote data; 


$ this —>data['error_warning'] = ''; 
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if (isset( $ this -> session — > data[ 'shipping methods'])) { 

$ this -> data[ 'shipping methods'] = $ this—> session — > data['shipping methods']; 
} else { 

$ this -> data['shipping_methods'] = array(); 


if (isset( $ this -> session — > data[ 'shipping method']['code'])) ( 
$this-»data['shipping code'] = $ this -> session -> data[ 'shipping_method'] 
['code']; 
$ this - > customer - > setShippingMethod( $ this — > session - > data[ 'shipping 
method'][ 'code']) ; 
} else { 
$ this —>data['shipping_code'] = $ this- > customer 一 > getShippingMethod(); 


if (file_exists(DIR_TEMPLATE . $ this — > config - > get('config template') . '/template/ 
checkout/shipping. tpl')) { 
$ this -> template = $ this -> config -> get('config template') . '/template/ 
checkout/shipping. tpl'; 
} else { 
$ this -> template = 'default/template/checkout/shipping. tpl'; 


return $ this-> render(); 
public function payment method() ( 

$ this — > load language( 'checkout/checkout') ; 

$ this -> load - > model( 'account/address') ; 

if(isset( $ this -> session -> data['shipping address id'])) 

$ this -> session — »data['payment address id']- $ this -> session -> data['shipping | 

address id']; 
else 
$ this - > session- > data[ payment address id']- $ this -> customer — > getAddressId(); 


$ payment address = $ this -> model account address - > getAddress( $ this - > session - > 
data['payment address id']); 


$ total data - array(); 
$ total = 0; 
$ taxes $ this -> cart -> getTaxes() ; 


$ this — > load - > model( 'setting/extension'); 


$sort order = array(); 
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$ results = $this—>model setting extension— > getExtensions( 'total'); 
foreach ( $ results as $key => $ value) { 
$sort order[ $key] = $this-»config-»get( $ value['code'] . ' sort order'); 
array multisort( $ sort order, SORT ASC, $ results); 
foreach ( $ results as $ result) { 
if ($this-»config-»get( $ result['code'] . ' status')) ( 


$ this -> load -> model('total/'. $ result['code']); 


$this- ^('model total '. $ result[ 'code']} -> getTotal( $ total data, 
$total, $ taxes); 
} 
} 
// Payment Methods 
$ nethod data - array(); 


$ this —> load- > model('setting/extension'); 
$ results = $this-» model setting extension- > getExtensions( payment'); 
foreach ( $ results as $ result) { 

if ($ this -> config-» get( $ result['code'] . ' status')) { 


$ this -> load- » model('payment/'. $ result['code']); 


$ method = $ this - »('model payment '. $result['code']) - > getMethod 
( $ payment address, $ total); 


if ( $ method) { 
$ method data[ $ result['code']] = $ method; 


$sort order - array(); 
foreach ( $ method data as $key => $ value) { 
$sort order[ $key] = $ value['sort order']; 
array multisort( $ sort order, SORT ASC, $ method data); 
$ this -> session — > data[ 'payment_methods'] = $ method data; 


if (isset( $ this -> session- » data[ 'payment_methods']) && ! $ this -> session 一 > data 
['payment methods']) ( 
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$this-»data['error warning'] = sprintf( $ this—> language -» get('error no 
payment'), $ this—>url—>1ink('information/contact')); 
) eise ( 


$this-»data['error warning'] = ''; 


if (isset( $ this -> session > data[ 'paynent. nethods'])) ( 

$ this -> data['payment methods'] = $ this—> session -> data[ 'payment nethods!]; 
) else ( 

$this-»data['payment methods'] = array(); 


if (isset( $ this -> session -> data[ 'payment method']['code'])) { 
$ this — > data['payment code'] = $ this -> session- > data[ payment method'] 
'code']; 
$ this -> customer 一 > setPaymentMethod( $ this — > data[ 'payment_code']) ; 
$ this -> log - > debug( 'IlexDebug:: Checkout payment method 1 '. $ this -> data 
"payment code']); 
) else if( $ this — » customer - > getPaynentMethod()!- '')( 
$this-»data['payment code'] = $ this 一 > customer - > getPaymentMethod() ; 
$ this - > log — > debug('IlexDebug:: Checkout payment method 2 '. $ this -> data 
"payment code']); 
) else{ 


$ this - > data[ 'payment_code'] = $ this -> config -> get('config default payment!); 
$ this - > log - > debug('IlexDebug:: Checkout payment method 3 '. $ this -> data 
'payment code']); 
} 





$ this - > session -> data['payment method']['code'] = $ this—> datal[ 'payment_code'] ; 


if ( $ this-» config-» get('config checkout id')) { 
$ this -> load - > model( 'catalog/information'); 


$ information info = $ this - > model catalog information - > getInformation 
($ this - > config-»get('config checkout id')); 


if ($ information info) ( 
$this-»data['text agree'] = sprintf( $ this - > language - > get('text agree 
'), $ this- » url -» link('information/information/info', 'information_id='. $ this-» config 
-»get('config checkout id'), 'SSL'), $ information info['title'], $ information info ['title 
S 
} else { 
$this-»data['text agree'] = "'; 
} 
} else { 
$this-»data['text agree'] = ''; 
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if (file exists(DIR TEMPLATE . $ this — > config—> get('config template') . '/template/ 
checkout/paynent. tpl')) { 

$ this - » template 
checkout/payment. tpl'; 


$this-» config - > get('config template') . '/template/ 
} else { 


$ this 一 > template 


‘default/template/checkout/payment. tpl'; 
} 
return $ this - » render(); 


public function payment() ( 


if (isset( $ this -> session- » data[ 'payment method'])) ( 

$this-» data['payment code'] = $ this - > session 一 > data[ 'payment method'] 
['code']; 
$ this - > customer 一 > setPaynentMethod( $ this — > data[ 'payment code']); 


$ this -> log 一 > debug('IlexDebug:: payment comfirm payment method '. 
data[ 'payment code']); 


$this-» 
) else if( $ this — » customer - > getPaynentMethod()!- '')( 

$this-»data['payment code'] = $ this -> customer - > getPaymentMethod( ) ; 
data['payment code']); 


$ this - > log - > debug( 'IlexDebug:: payment comfirm 2 getPaymentMethod '. $ this -> 
) else{ 


$ this -> data[ 'payment_code'] = $ this - > config- > get('config default payment'); 
code']); 


$ this- > log -> debug('IlexDebug:: payment comfirm 3 '. $ this- > data[ 'payment_ 
} 


return $ this- » getChild('payment/'. $ this- » data[ 'payment code']); 


public function confirm() { 


get('config stock checkout'))) ( 


if ((! $ this—> cart -> hasProducts() && (! isset( $ this — > session- > data[ 'vouchers']) | | 
! $ this -> session 一 > data[ 'vouchers'])) || (! $ this» cart -> hasStock() && ! $ this 一 > config -> 


$ json['redirect'] = $this-»url-» link('checkout/cart'); 


$ this — > load - > model( 'account/address') ; 


if ($this-»cart-» hasShipping()) { 


$ this -> load - » model( 'account/address') ; 
if ( $ this -> customer - > isLogged()) { 


$ shipping address = $ this - > model account address - > getAddress 
( $ this -> session — > data['shipping address id']); 
else 


if(isset( $ this — > session- > data['shipping address id'])) 
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$ shipping address = $ this - > model account address - > getAddress 
( $ this - > customer 一 > getAddressId()); 


) else{ 
$ this -> redirect( $ this -> url -> link('account/login', '', 'SSL')); 


if (!isset( $ shipping address)) { 
$ json['redirect'] = $ this-> url -> link('checkout/checkout', '', 'SSL'); 


if (!isset( $ this -> session -> data[ 'shipping method'])) { 
$ json['redirect'] = $this-»url-» link('checkout/checkout', '', 'SSL'); 
} 
} else { 
unset( $ this -> session - > data[ 'guest'][ 'shipping']) ; 
unset( $ this -> session -> data['shipping address id']); 
unset( $ this -> session - > data[ 'shipping method']); 
unset( $ this -> session -> data[ 'shipping_methods']) ; 


$ json = array(); 
if (! $ json) ( 
$ total_data = array(); 
$total = 0; 
$ taxes = $ this—>cart —>getTaxes(); 
$ this -> load- » model('setting/extension'); 
$sort order - array(); 


$ results = $this-» model setting extension -> getExtensions( 'total'); 


foreach ( $ results as $key => $ value) { 
$ sort_order[ $key] = $ this—>config->get( $ value['code'] . ' sort order 


array_multisort( $ sort_order, SORT_ASC, $ results); 


foreach ( $ results as $ result) { 
if ( $ this» config-»get( $ result['code'] . ' status')) { 
$ this -> load- » model('total/'. $ result['code']); 


$this-»('model total '. $ result['code']) -> getTotal( $ total data, 
$ total, $ taxes); 
) 
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$ sort order = array(); 


foreach ($ total data as $key => $value) ( 
$ sort order[ $ key] = $ value['sort order']; 
$ this -> log -> debug( 'IlexDebug:: get total data '. $ value[ 'code']) ; 


array multisort( $ sort order, SORT ASC, $ total data); 
$ this - > language - > load( 'checkout/checkout') ; 
$data = array(); 


$ data[ 'invoice_prefix'] = $this 一 > config 一 > get('config_invoice_prefix'); 
$data['store id'] = $ this-» config- » get('config store id'); 
$data['store name'] = $ this-» config- » get('config name'); 


if ($data['store id']) { 

$data['store url'] = $this-»config-» get('config url'); 
} else { 

$ data['store_url'] = HTTP SERVER; 


if ( $ this -> customer - > isLogged()) ( 
$ data['customer id'] = $ this -> customer -> getId(); 
$ data['customer group id'] = $ this -> customer - > getCustomerGroupId(); 
$ data['firstname'] = $ this -> customer -> getFirstName(); 
$ data['lastname'] = $ this -> customer 一 > getLastName( ) ; 
$data['email'] = $ this -> customer -> getFmail(); 
$ data[ 'telephone'] = $ this -> customer 一 > getTelephone(); 
$data['fax'] = $ this -> customer 一 > getFax(); 


$ this -> load - » model ( 'account/address') ; 
if(isset( $ this — > session — > data[ 'payment_address_id'])){ 
$ payment address = $ this - > model account address - > getAddress 


( $ this -> session- > data['payment address id']); 


group id'); 


) 
} elseif (isset( $ this -> session -> data[ 'guest'])) { 
$ data['customer id'] = 0; 
$data['customer group id'] = $ this -> config -> get('config customer 


$ data['firstname'] = $ this-> session- » data['guest'][ 'firstname']; 
$data['lastname'] = $ this -> session 一 > data[ 'guest'][ 'lastname']; 
$data['email'] = $ this-> session 一 > data[ 'guest'][ 'email']; 

$ data['telephone'] = $ this- » session- » data['guest'][ 'telephone']; 
$data['fax'] = $this-» session- » data[ 'guest'][ 'fax']; 


$ payment address = $ this -> session -> data[ 'guest'][ 'payment']; 
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if(isset( $ payment address))( 
$ data['payment firstname'] = $ payment address[ 'firstname']; 
$ data['payment lastname'] = $ payment address['lastname']; 
$ data['payment company'] = $ payment address[ company']; 
$ data['payment address 1'] = $ payment address['address 1']; 
$ data['payment address 2'] = $ payment address['address 2']; 
$ data['payment city'] = $ payment address[ 'city']; 
$ data['payment postcode'] = $ payment address['postcode']; 
$ data['payment zone'] = $ payment address[ 'zone']; 
$data['payment zone id'] = $ payment address['zone id']; 
$ data['payment country'] = $ payment address['country']; 
$ data['payment country id'] = $ payment address['country id']; 
$ data['payment address format'] = $ payment address['address format']; 
}else{ 
$ data[ payment firstname'] 
$ data['payment lastname'] = ''; 
$ data['payment company'] = ''; 
$ data[ 'payment address 1'] 
$ data[ payment address 2'] 
$ data['payment city'] = ''; 
$ data['payment postcode'] = ''; 
$ data['payment zone'] = ' 
$ data['payment zone id'] = ''; 
$ data['payment country'] = ''; 
$ data['payment country id'] = 
$ data['payment address format'] = ''; 


















if (isset( $ this -> session -> data[ 'payment method']['title'])) { 
$data['payment method'] = $ this -> session - > data[ 'payment method'] 
['title']; 
} else { 
$ data['payment method'] = $ this -> customer - > getPaymentMethodTitle(); 


if ($this-»cart-» hasShipping()) { 
if ( $ this -> customer - » isLogged()) { 
$ this — > load - > model( 'account/address') ; 
if(isset( $ this -> session- > data['shipping address id'])) 
$ shipping address = $this - > model account address - > 
getAddress( $ this - > session — > data['shipping address id']); 
else 
$ shipping address = $ this - > model account address - > 
getAddress( $ this 一 > customer 一 > getAddressId()); 


) eise( 


第 12 章 ”PHP 动态 网 站 设计 实例 


$ this -> redirect( $ this -> url -> link('account/login', '', 'SSL')); 


$ data['shipping_firstname'] = $ shipping address[ 'firstname']; 

$ data['shipping_lastname'] = $ shipping_address[ 'lastname']; 

$ data['shipping mobile'] = $ shipping address[ 'mobile']; 

$ data['shipping phone'] = $ shipping address['phone']; 

$ data['shipping_company'] = $ shipping address[ 'company']; 

$ data['shipping address 1'] = $ shipping address['address 1']; 

$ data['shipping address 2'] = $ shipping address['address 2']; 

$ data['shipping city'] = $ shipping address['city']; 

$ data['shipping postcode'] = $ shipping address['postcode']; 

$ data['shipping zone'] = $ shipping address['zone']; 
$data['shipping zone id'] = $ shipping address['zone id']; 

$ data['shipping country'] = $ shipping address[ 'country']; 

$ data['shipping country id'] = $ shipping address['country id']; 
$data['shipping address format'] = $ shipping address['address format']; 


if (isset( $ this -> session- > data[ 'shipping_method']['title'])) { 
$ data[ 'shipping_method'] = $ this -> session -> data[ 'shipping method'] 


[ 'title']; 
) eise( 
$ data['shipping method'] = $ this—> customer -> getShippingMethodTitle(); 
) 
) else { 
$ data['shipping firstname'] = ''; 
$ data['shipping lastname'] = ''; 


$ data['shipping mobile'] 
$ data['shipping phone'] = ''; 

$ data['shipping company'] = ''; 
$ data[ shipping address 1'] 
$ data['shipping address 2'] - 
$ data['shipping city'] = ''; 

$ data['shipping postcode'] = ''; 
$ data['shipping zone'] = 
$ data['shipping zone id'] = ''; 
$ data['shipping country'] = ''; 











$ data['shipping country id'] = ''; 
$ data['shipping address format'] = ''; 
$ data['shipping method'] = ''; 


if ( $ this -> cart -> hasShipping()) { 
$ this - > tax - > setZone( $ shipping address['country id'], $ shipping 
address[ 'zone_id']); 
} else { 
$ this -> tax 一 > setZone( $ payment address['country id'], $ payment address 
['zone_id']); 
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$ product data = array(); 


foreach ( $ this- > cart-»getProducts() as $ product) { 
$ option data = array(); 


foreach ( $ product[ 'option'] as $ option) ( 


if ( $ option['type'] != 'file') { 
$ option_data[] = array( 
'product option id' => $option['product option 


id'], 
'product option value id' => $ option['product option 


value id'], 


'product option id' => $option['product option. 
id'], 

'product option value id' => $ option['product option 
value id'], 

'option id' => S$option['option id'], 

'option value id' => $option['option value id'], 

‘name’ => $option['name'], 

‘value’ => $option['option value'], 

'type" => $option['type'] 


E 
) eise ( 
$ this -> load- > library( 'encryption'); 


$ encryption = new Encryption( $ this - > config - > get('config | 
encryption')); 


$ option_data[] = array( 


'product option id' => $ option['product option 
id'], 

'product option value id' => $ option['product option 
value id'], 

"product option id' => $option['product option 
id'], 

"product option value id' => $ option['product option 
value id'], 

"option id' => $option['option id'], 

'option value id' => $option['option value id'], 

"name' => $ option[ name'], 

‘value’ => $ encryption -> decrypt 
( $ option[ ‘option value']), 

"type' => $ option[ type'] 


); 
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$ product data[] = array( 
'product id' => $ product[ 'product id'], 


‘href' => $ this—> url -> link('product/product', '&product id- '. 


$ product['product id']), 


id']) 


'name" => $ product[ 'name'], 
"model" 7» $ product[ 'model'], 
'option' => $ option data, 
'download' => $ product[ 'download'], 
'quantity' => $ product[ 'quantity'], 
'subtract' => $ product['subtract'], 


"price' => $ product[ 'price'], 
"total' 7» $ product[ 'total'], 
"tax" => $ this -> tax- > getRate( $ product['tax class 


); 


// Gift Voucher 


if (isset( $ this - > session - > data[ 'vouchers']) && $ this — > session - > data 


['vouchers']) { 


foreach ( $ this - > session- > data[ 'vouchers'] as $ voucher) { 


$ product data[] = array( 
'product id' => 0, 
‘href! => E, 





'name" => $ voucher[ 'description'], 
"model" =>", 

‘option' => array(), 

'download' array(), 

"quantity' => 1, 

'subtract' => false, 

‘price’ => $ voucher[ 'anount'], 
‘total’ => $ voucher[ 'anount'], 
"tax! =>0 


$data['products'] = $ product data; 
$ this -> data['products'] = $ product data; 


$data['totals'] = $total data; 


if(isset( $ this -> session- » data[ 'comment']) )( 


$ data['comment'] = $ this-> session- » data[ 'comment']; 
Jeise( 
$data['comment'] - ''; 


i 
$data['total'] = $ total; 
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$data['reward'] = $ this—>cart—>getTotalRewardPoints(); 


if (isset( $ this 一 > request —> cookie[ 'tracking'])) { 
$ this -> load -> model('affiliate/affiliate'); 


$affiliate info = $ this —> model affiliate affiliate - > getAffiliateByCode 
( $ this — > request 一 > cookie[ 'tracking']); 


if(S$affiliate info) { 
$data['affiliate id'] = $affiliate info['affiliate id']; 
$ data[ 'commission'] = ($ total/ 100) * $affiliate info['commission']; 
} else { 
$ data['affiliate id'] = 0; 
$ data['commission'] - 0; 
) 
) eise( 
$ data['affiliate id'] = 0; 
$ data['commission'] = 0; 


) 

$data['language id'] = $ this-> config-» get('config language id'); 
$data['currency id'] = $this-»currency- > getId(); 

$ data['currency code'] = $ this- > currency - » getCode() ; 


$ data['currency value'] = $ this -> currency -> getValue( $ this - > currency - > 
getCode()) ; 
$data['ip'] = $this-» request - > server[ 'REMOTE ADDR']; 


$ this — > load- > model('checkout/order'); 


if (isset( $ this -> session -> data[ payment method'])) { 
$ this -> data['payment code'] = $ this -> session -> data[ 'payment method'] 
['code']; 
$ this - > customer 一 > setPaymentMethod( $ this — > data[ 'payment code']); 
$ this -> log - > debug('IlexDebug:: Checkout comfirm payment method '. $ this 一 > 
data['payment code']); 
} else if( $ this - > customer - > getPaymentMethod( )!= '') { 
$this-»data['payment code'] = $ this—> customer - > getPaymentMethod() ; 
$ this - > log - > debug( 'IlexDebug:: Checkout comfirm 2 getPaymentMethod '. 
$ this — > data[ 'payment code']); 
} else{ 


$ this — > data[ 'payment_code'] = $ this - > config — > get ( 'config_default_ 
payment') ; 
$ this — > log - > debug('IlexDebug:: Checkout comfirm 3 '. $ this - > data 
[ 'payment_code"]) ; 
} 


$ data[ 'payment_code'] = $ this — > data[ 'paynent. code']; 


第 12 章 ”PHP 动态 网 站 设计 实例 


if(!isset( $ this -> session -> data['order_ id'])) 
$ this -> session — > data[ 'order_id'] = $ this- > model_checkout_order 一 > 
create( $ data); 
else 
$ this -> model checkout order — > modify( $ data); 


// Gift Voucher 
if (isset( $ this -> session 一 > data[ vouchers']) && is array( $ this -> session -> 
data['vouchers'])) ( 
$ this - > load - > model ( 'checkout/voucher') ; 


foreach ( $ this -> session- > data[ 'vouchers'] as $ voucher) { 


$ this - > model checkout voucher - > addVoucher( $ this - > session - > 
data['order id'], $ voucher); 


} 


// Gift Voucher 
$ this —>data['vouchers'] = array(); 


if (isset( $ this - > session - > data[ 'vouchers']) && $ this -> session- > data 
['vouchers']) { 
foreach ( $ this -> session 一 > data[ 'vouchers'] as $key => $ voucher) { 
$ this -> data['vouchers'][] = array( 
'description' => $ voucher[ 'description'], 
'amount' => $ this -> currency -> format( $ voucher[ 'amount']) 


E 


$this-»data['totals'] = $total data; 


if (isset( $ this -> session -> data[ 'shipping_method']['title'])) { 
$this-»data['shipping method'] = $this- > session - > data[ shipping | 
method'][ 'title']; 
} else { 
$ this — > data[ ' shipping method'] = $this - > customer - > 
getShippingMethodTitle(); 
l 


if (isset( $ this -> session -> data[ 'payment method']['title'])) { 
$ this -> data[ payment method'] = $ this -> session- > data[ payment method 
"lE'title']; 
) eise( 
$ this —> data['payment method']- $ this —> customer — > getPaymentMethodTitle(); 


if (file exists(DIR TEMPLATE . $ this—> config 一 > get('config template') . '/template/ 
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checkout/confirm.tpl')) { 
$ this -> template = $ this- > config- > get('config template') . '/template/ 
checkout/confirm. tpl'; 
} else { 
$ this -> template = 'default/template/checkout/confirm. tpl'; 


return $ this-> render(); 


public function update() { 
if ((! $ this—> cart — » hasProducts() && (! isset( $ this -> session - > data[ 'vouchers']) | | 
! $ this -> session -> data[ 'vouchers'])) || (! $ this 一 > cart -> hasStock() && ! $ this- > config -> 
get('config stock checkout'))) { 
$ json['redirect'] = $this-»url-» link('checkout/cart'); 


$ this -> load- > model( 'account/address') ; 


if ($ this -> cart - » hasShipping()) { 
$ this -> load - » model( 'account/address') ; 


if ($ this -> customer - » isLogged()) ( 
if(isset( $ this -> session -> data[ 'shipping address id'])) 
$ shipping address = $ this -> model account address - > getAddress( $ this - > 
session -> data['shipping address id']); 
else 
$ shipping address = $ this — > model account address - > getAddress( $ this - > 
customer 一 > getAddressId()); 
) else{ 
$ this -> redirect( $ this -> url -> link('account/login', '', 'SSL')); 


if (!isset( $ shipping address)) { 
$ json['redirect'] = $this-»url-» link('checkout/checkout', "', 'SSL'); 


if (!isset( $ this -> session - > data[ 'shipping method'])) { 
$ json['redirect'] = $this-»url-» link('checkout/checkout', '', 'SSL'); 
} 
} else { 
unset( $ this — > session — > data[ 'guest'][ 'shipping']) ; 
unset( $ this- > session -> data['shipping address id']); 
unset( $ this — > session — > data['shipping method']); 
unset( $ this- > session -> data[ 'shipping methods']); 
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$ json = array(); 


if (! $ json) ( 


$total data - array(); 

$total = 0; 

$ taxes = $this-»cart- »getTaxes() ; 

$ this — > load - » model('setting/extension'); 
$sort order - array(); 


$ results = $this-» model setting extension - > getExtensions( 'total'); 


foreach ( $ results as $key => $ value) { 
$ sort order[ $ key] = $this-»config-»get( $ value['code'] . ' sort order 


array multisort( $ sort order, SORT ASC, $ results); 
foreach ( $ results as $ result) { 
if ($ this -> config-» get( $ result['code'] . ' status')) { 


$ this -> load- » model('total/'. $ result['code']); 


$ this-»('model total '. $ result[ 'code']} -> getTotal( $ total data, 


$total, $ taxes); 


) 


$sort order = array(); 
foreach ($ total data as $key => $ value) { 
$ sort_order[ $key] = $value['sort order']; 
$ this -> log - > debug( 'IlexDebug: : get total data '. $ value[ 'code']) ; 
array multisort( $ sort order, SORT ASC, $ total data); 
$ this — > language — > load( 'checkout/checkout') ; 
$data - array(); 
$data['invoice prefix'] = $this-»config-»get('config invoice prefix'); 


$data['store id'] = $this-»config-»get('config store id'); 
$data['store name'] = $ this-> config- » get('config name'); 
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if ($data['store id']) ( 

$data['store url'] = $this-»config-» get('config url'); 
) eise ( 

$ data['store_url'] = HTTP SERVER; 


if ( $ this -> customer - > isLogged()) { 
$ data['customer id'] = $ this -> customer 一 > getId(); 
$data['customer group id'] = $ this -> customer 一 > getCustomerGroupId(); 
$data['firstname'] = $ this -> customer -> getFirstName(); 
$data['lastname'] = $ this -> customer 一 > getLastName(); 
$data['email'] = $this-» customer - > getEmail(); 
$ data['telephone'] = $ this -> customer — > getTelephone(); 
$data['fax'] = $this-» customer -> getFax() ; 


$ this -> load- > model( 'account/address') ; 
if(isset( $ this - > session- > data['payment address id']))( 
$ payment address = $ this - > model account address - > getAddress 
( $ this -> session -> data['payment address id']); 
) 
} elseif (isset( $ this -> session- » data[ 'guest'])) { 
$ data['customer id'] = 0; 
$data['customer group id'] = $ this -> config -> get('config customer - 
group id'); 
$ data['firstname'] = $ this- > session -> data['guest'][ 'firstname']; 
$ data['lastname'] = $ this -> session -> data[ 'guest']['lastname']; 
$ data['email'] = $ this-> session -> data[ 'guest']['email']; 
$ data[ 'telephone'] = $ this- > session -> data['guest'][ 'telephone']; 
$data['fax'] = $ this-> session -> data[ 'guest']['fax']; 


$ payment address = $ this -> session -> data[ 'guest']['payment']; 


if(isset( $ payment address))( 
$ data['payment firstname'] = $ payment address['firstname']; 
$ data['payment lastname'] = $ payment address[ 'lastname']; 
$ data['payment company'] = $ payment address['company']; 
$ data['payment address 1'] = $ payment address[ address 1']; 
$ data['payment address 2'] = $ payment address['address 2']; 
$ data['payment_city'] = $ payment address['city']; 
$ data['payment postcode'] = $ payment address['postcode']; 
$ data['payment zone'] = $ payment address['zone']; 
$ data['payment zone id'] = $ payment address['zone id']; 
$ data['payment country'] = $ payment address['country']; 
$data['payment country id'] = $ payment address['country id']; 
$ data['payment address format'] = $ payment address['address format']; 
Jeise( 
$ data['payment firstname'] = ''; 
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$ data[ 'payment lastname'] = ''; 
$ data[ 'payment_company'] = ''; 
$ data[ 'payment_address 1'] 
$ data['payment address 2'] 
$ data['payment city'] = ''; 
$ data['payment postcode'] - ''; 


" 








$ data['payment zone'] = ''; 

$ data['payment zone id'] = ''; 
$ data['payment country'] = ''; 
$ data['payment country id'] = 
$ data['payment address format'] = ''; 








if (isset( $ this -> session -> data[ payment method']['title'])) { 
$data['payment method'] = $ this -> session - > data[ 'payment method'] 
['title']; 
) eise( 
$ data[ 'payment_method'] = $ this -> customer 一 > getPaynentMethodTitle(); 


if (S$this-»cart-» hasShipping()) { 
if ($ this -> customer -> isLogged()) ( 
$ this -> load - > model( 'account/address') ; 
if(isset( $ this -> session- > data[ 'shipping address id'])) 
$ shipping address = $ this - > model account address - > getAddress 
( $ this -> session -> data['shipping address id']); 
else 
$ shipping address = $ this - > model account address - > getAddress 
( $ this -> customer 一 > getAddressId()); 


} else{ 
$ this -> redirect( $ this - » url -> link('account/login', '', 'SSL')); 


$ data['shipping firstname'] = $ shipping address['firstname']; 

$ data['shipping_lastname'] = $ shipping address['lastname']; 

$ data['shipping_mobile'] = $ shipping address[ 'mobile']; 

$ data['shipping_phone'] = $ shipping address['phone']; 
$data['shipping company'] = $ shipping_address[ 'company']; 

$ data['shipping address 1'] = $ shipping address['address 1']; 

$ data['shipping address 2'] = $ shipping address['address 2']; 

$ data['shipping_city'] = $ shipping address['city']; 

$ data['shipping postcode'] = $ shipping address['postcode']; 

$ data['shipping_zone'] = $ shipping address['zone']; 
$data['shipping zone id'] = $ shipping address['zone id']; 
$data['shipping country'] = $ shipping address['country']; 
$data['shipping country id'] = $ shipping address['country id']; 
S$data['shipping address format'] = $ shipping address['address format']; 
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if (isset( $ this—> session -> datal 'shipping_method'][ 'title'])) { 

$ data['shipping method'] = $ this—> session- data[ shipping method'] 

['title']; 

} else ( 

$ data[ 'shipping method'] = $ this -> customer 一 > getShippingMethodTitle( ) ; 
} 

} else { 

$ data[ 'shipping firstname'] = 
$ data[ 'shipping_lastname'] 
$ data['shipping mobile'] = 
$data['shipping phone'] = ''; 
$ data['shipping company'] = ' 
$ data['shipping address 1'] = 
$ data['shipping address 2'] = 
$ data['shipping city'] = ''; 
$ data['shipping postcode'] = ''; 
$ data['shipping zone'] = ''; 

















$ data['shipping zone id'] - ''; 
$ data['shipping country'] = ''; 





$data['shipping country id'] = "' 
$ data['shipping address format'] = ''; 
$ data['shipping method'] = ''; 


if ($this-»cart- » hasShipping()) { 
$this-» tax- > setZone( $ shipping address['country id'], $ shipping | 
address['zone id']); 
} else { 
$ this -> tax - > setZone( $ payment address['country id'], $ payment address 
['zone id']); 


) 


$ product data - array(); 


foreach ( $ this -> cart - > getProducts() as $ product) ( 
$ option data = array(); 


foreach ( $ product[ 'option'] as $ option) ( 
if ( $ option['type'] != 'file') { 
$ option_data[] = array( 

'product option id' => $option['product 
option id'], 

'product option value id' => $ option[ product 
option value id'], 

'product option id' => $ option[ 'product_ 
option id'], 

'product option value id' => $ option[ product 


option value id'], 


value id'], 


value'], 


encryption’) ); 


option_id'], 


option value id'], 


option id'], 


option value id'], 


value id'], 
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"option id' => $ option[ 'option id'], 
'option value id' => S$option['option 
'name" => $ option[ 'name'], 
'value' => $option['option 
"type! => $option['type'] 


); 
} else { 
$ this — > load - > library('encryption'); 
$ encryption = new Encryption( $ this ~- > config - > get ( 'config_ 
$ option_data[] = array( 
'product_option_id' => $ option[ 'product_ 
'product option value id' => $ option['product 


'product option id' => $option['product 


'product option value id' => $ option[ 'product 


decrypt( $ option['option value']), 


'option id' => $option['option id'], 
'option value id" => $option['option 
'name' => $ option[ 'name'], 
‘value’ => $ encryption - > 
'type' => $option['type'] 
E 
} 
$ product data[] = array( 


"product id' => $ product['product id'], 
‘href! => $ this —> url —> link('product/product', '&product | 


id-'. $product['product id']), 


"name" => $ product[ 'name'], 
"model" => $ product[ 'model'], 
'option' => $ option data, 


'download' => $ product[ 'download'], 

'quantity' => $ product[ 'quantity'], 

'subtract' => $ product[ 'subtract'], 

'price' => $ product[ 'price'], 

'total' => $ product[ 'total'], 

"tax' => $this-»tax-»getRate( $ product[ 'tax - 
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class id']) 


); 


// Gift Voucher 
if (isset( $ this - > session - > data[ 'vouchers']) && $ this -> session - > data 
['vouchers']) { 
foreach ( $ this - > session — > data[ 'vouchers'] as $ voucher) { 
$ product_data[] = array( 
'product id' => 0, 


"href" =>'#', 

‘name’ => $ voucher[ 'description'], 
"model' amu. 

'option' 7» array(), 

'download' => array(), 

'quantity' =>1, 

'subtract' => false, 

'price' => $ voucher[ 'amount'], 
'total' => $ voucher[ 'amount'], 

"tax" =>0 


$ data[ 'products'] = $ product data; 
$ this -> data[ 'products'] = $ product data; 


$data['totals'] = $ total_data; 


if(isset( $ this — > session - > data[ 'comment']) )( 
$ data['comment'] = $ this -> session -> data[ 'comment']; 
}else{ 
$data['comment'] = ''; 
} 
$data['total'] = $ total; 
$ data[ 'reward'] = $ this- > cart -> getTotalRewardPoints(); 


if (isset( $ this -> request —» cookie[ 'tracking'])) { 
$ this -> load - » model( 'affiliate/affiliate') ; 


$affiliate info = $this - > model _ affiliate affiliate - > 
getAffiliateByCode( $ this — > request - > cookie[ 'tracking']); 


if ( $ affiliate_info) { 

$data['affiliate id'] = $ affiliate_info[ 'affiliate_id']; 

$ data[ 'commission'] = ($ total / 100) * $ affiliate info['commission']; 
} else { 

$ data['affiliate id'] = 0; 

$ data[ 'commission'] = 0; 


} else { 
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$ data[ 'affiliate id'] = 0; 
$ data['commission'] = 0; 


$data['language id'] = $this-» config-» get('config language id'); 

$ data['currency id'] = $ this—>currency->getId(); 

$data['currency code'] = $ this- > currency - » getCode() ; 

$data['currency value'] = $ this -> currency 一 > getValue( $ this - » currency - » 
getCode()) ; 

$data['ip'] = $ this—> request — > server['REMOTE ADDR']; 


$ this — > load- > model('checkout/order'); 


if (isset( $ this -> session -> data[ 'payment_method'])) { 
$ this — > data['payment code'] = $ this -> session -> data[ 'payment_method'] 
['code']; 
$ this -> customer 一 > setPaymentMethod( $ this — > data[ 'payment code']); 
$ this -> log - > debug('IlexDebug:: Checkout comfirm payment method '. $ this 一 > 
data[ 'paynent code']); 
) else if( $ this - > customer 一 > getPaynentMethod( ) != '') { 
$ this -> data['payment code'] = $ this- > customer - > getPaymentMethod() ; 
$ this - » log - » debug( 'IlexDebug:: Checkout comfirm 2 getPaymentMethod '. 
$ this 一 > data[ 'payment code']); 
) else{ 


$this-» data[ 'payment_code'] = $ this -» config - > get('config default - 
paynent') ; 
$ this — > log - > debug ( 'IlexDebug:: Checkout comfirm 3 '. $ this - > data 
['paynent. code']) ; 
} 


$ data[ 'payment_code'] = $ this -> data[ 'payment_code']; 


if(!isset( $ this -> session -> data['order id'])) 

$ this -> session -> data[ 'order_id'] = $ this -> model checkout order -> create 
( $ data); 

else 

$ this -> model checkout order -> modify( $ data); 


// Gift Voucher 
if (isset( $ this -> session- > data['vouchers']) && is array( $ this -> session- > 
data[ 'vouchers'])) ( 
$ this -> load - > model( 'checkout/voucher') ; 


foreach ( $ this -> session- > data[ 'vouchers'] as $ voucher) { 
$ this — > model checkout voucher - > addVoucher( $ this — > session 一 > 
data['order id'], $ voucher); 
) 


// Gift Voucher 
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$ this -> data[ 'vouchers'] = array(); 


if (isset( $ this - > session - > data[ 'vouchers']) && $ this -> session 一 > data 
['vouchers']) { 
foreach ( $ this -> session- > data[ 'vouchers'] as $key => $ voucher) { 
$ this -> data['vouchers'][] = array( 
'description' => $ voucher[ 'description'], 
‘amount ' => $ this - > currency - > format ( $ voucher 
[ 'amount']) 


$this-»data['totals'] = $total data; 


if (isset( $ this -> session - > data['shipping method']['title'])) ( 
$ this -> data['shipping method'] = $ this -> session - > data[ 'shipping | 
method'][ 'title']; 
} else { 
$ this - > data[ 'shipping_method'] = $this - > customer - > 
getShippingMethodTitle(); 
} 


if (isset( $ this -> session -> data[ 'payment_method']['title'])) ( 
$ this -> data[ 'payment_method'] = $ this -> session — > data[ 'payment_method 
'J['title']; 
} else { 
$this - > data [ ' payment _ method ' ] = $this - > customer - > 
getPaymentMethodTitle(); 
) 


} 


$ this -> load -> library('json'); 


$ this — > response - > setOutput(Json: :encode( $ json) ); 


public function validate() { 
$ this — > load language( 'checkout/checkout') ; 


if (! $ this -> customer -> isLogged()) { 
$this-»session-»data['redirect'] = $ this -> url -> link( 'checkout/checkout', 
", 8817); 


$ this -> redirect( $ this -> url- » link('account/login', '', 'SSL')); 
} 


if( $ this -> request — > get[ 'token'] == ''){ 
return true; 


} 
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$ json = array(); 


if(!isset( $ this -> session — > data[ 'payment method'])) 
$ json['error']['warning'] = $this-> language 一 > get('error_ payment!); 


if( $ this-» cart — > hasShipping()){ 
if(! isset( $ this —» session -> data['shipping method'])) 
$ json[ 'error']['warning'] = $ this—> language -> get('error shipping'); 


if(! isset( $ this —> session — > data[ 'shipping address id'])) 
$ json['error']['warning'] = $ this- > language -> get('error address'); 


if(!isset( $ json[ 'error']))( 
$ this -> load -> model ( 'checkout/order') ; 
// added comment to order 
/ * if ( $ this —> request — > server['REQUEST METHOD'] == 'POST') { 
$ this 一 > model checkout order - > updateOrderComment( $ this - > session - > data 
['order id'], $ this -> request - > post[ 'comment']) ; 
} 
*/ 
//TODO update order status to nonpay 


if( $ this - > request — > get[ 'token'] == $ this -> session- > data['checkout token'])( 
if(isset( $ this — > session- > data[ 'order_id'])) { 


if(isset( $ this -> session - » data[ 'payment method']['code']))( 


if(!in array( $ this - > session- > data[ 'payment method'][ 'code'], 
$ this -> direct payments))( 
$ this - > log - > debug ( ' IlexDebug:: Checkout Update 
updateOrderStatus() : order '. $ this -> session — > data['order id'] .'payment method '. $ this- > 
session -> data[ 'payment method'][ 'code']); 


$ this — > model checkout order - > updateOrderStatus( $ this - > 
session- » data['order id'], $ this — > config -> get('config order nopay status id')); 

$ this-»cart-»clear(); 

unset( $ this -> session -> data[ 'shipping method']); 

unset( $ this -> session- > data[ 'shipping methods']); 

unset( $ this -> session- > data[ 'payment method']); 

unset( $ this -> session- > data[ 'payment_methods']) ; 

unset( $ this -> session -> data[ 'guest']); 

unset( $ this -> session - > data[ 'comment']) ; 

unset( $ this -> session -> data['order id']); 

unset( $ this — > session - > data[ 'coupon']) ; 

unset( $ this -> session -> data[ 'voucher']) ; 

unset( $ this 一 > session - > data[ 'vouchers']) ; 

unset( $ this -> session- > data[ 'order id']); 

unset( $ this — > session- > data[ 'checkout_token']) ; 
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$ this —» load- > library('json'); 


$ this — > response - > setOutput(Json: : encode( $ json)); 


} 


下 单 购买 页 面 的 效果 如 图 12. 7 所 示 。 


i atest com | Bt 


Beso 


WA Rosone 





© mate 


EI —Wan— 


[d 
WR HRS 
Aum 
) «tuam 
) mnm 
© wi (ER o smg) 
E 


WAREHOUSE 





BR onSERASAN 


> Blend 


BAS. ¥200.00 


IAS. 200.00 


Rara 


teni 


SRTATATAR 


1B- ¥20000 » EHE nere mA rara 


xow 
xow 
x500 
xmo 
d 
aw LI ait 
1 200 200 
银行 转帐 指令 
RASWWRHUTSONA. 
[d 
VGEHELERIDAI TORS. 
Ed 
E 
Bere 
pari 


12.7 下 单 购 买 页 面 效 果 


98123; ”PHP 动态 网 站 设计 实例 


本 章 以 网 上 商城 的 设计 分 析 与 代码 实现 为 例 , 重 点 展示 了 PHP 动态 网 站 的 制作 过 程 。 
由 于 篇 幅 所 限 ,本 章 仅 概 要 地 演示 了 关于 网 上 商城 的 几 个 关键 业务 逻辑 实现 。 在 实际 开发 
类 似 网 上 商城 的 大 型 应 用 系统 时 , 遇 到 的 情况 要 复杂 得 多 ,除了 实现 基本 的 业务 逻辑 之 外 ， 
还 需要 综合 考虑 安全 ,性 能 、 容 错 等 诸多 因素 。 但 相信 通过 本 章 的 学 习 , 读 者 可 以 触 类 劳 通 ， 
把 自己 所 学 的 知识 真正 应 用 到 工作 实践 中 去 。 


习题 


运用 所 学 的 知识 ,开发 一 个 大 学 在 线 选 课 系 统 。 
运用 所 学 的 知识 ,开发 一 个 图 书 借阅 系统 。 
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